How to get a custom icon in a back button?

7
votes

I have following code:

<ion-nav-buttons side="left">
    <button class="button button-icon icon ion-chevron-left" ng-click="goBack()"></button>
</ion-nav-buttons>

Which producing following output:

enter image description here

I would like to change used icons for the custom icon (48×48 px).

How can I do it in right way in Ionic?

I tried to follow the instructions in this topic, but without luck.

4
cssionic-frameworkicons

4 Answers

12
votes

Exist easy way to solve your problem, just put in your .js this:

 $ionicConfigProvider.backButton.icon('my-back-button');

(Please see $ionicConfigProvider documentation here)

and your css:

.my-back-button {
content: url('http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/black-ink-grunge-stamps-textures-icons-arrows/003683-black-ink-grunge-stamp-textures-icon-arrows-double-arrowhead-left.png');
width: 35px;
}

You can run this example in this LINK

Another solution can be this (using only CSS):

  <ion-nav-back-button class="button-clear">
    <i class="button button-icon my-back-button"></i>
  </ion-nav-back-button>

and your css:

.my-back-button {
content: url('http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/black-ink-grunge-stamps-textures-icons-arrows/003683-black-ink-grunge-stamp-textures-icon-arrows-double-arrowhead-left.png');
width: 48px;
}

See this example here.

Note: A ionic blog in some way suggests using icon-fonts, but from my point does not make sense when there are few icons. Please read this link.

I hope this information is useful to you.

1
votes

Just do it! :)

<ion-nav-back-button class="button-clear ion-chevron-left">
</ion-nav-back-button>

Use the class="" attribute to set your custom icon.. In this case, i have used the ion-chevron-left (to be like your example)..!

But if you want to change the default text too.. you can do it different:

<ion-nav-back-button class="button-clear">
   <i class="ion-chevron-left"></i> Back Text
</ion-nav-back-button>

Ref: http://ionicframework.com/docs/api/directive/ionNavBackButton/

1
votes

If you are using ionic 5

<ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button icon="chevron-back-outline"></ion-back-button>
    </ion-buttons>
    <ion-title class='text-center toolbar-text'>Title</ion-title>
  </ion-toolbar>
0
votes

It may be late for the answer but for the latest version of ionic(5.4.16) at this date following way would save much time

<ion-nav-buttons side="left">
    <button text="" icon="chevron-back-outline" ng-click="goBack()"></button>
</ion-nav-buttons>

hope it will help someone