How to get a custom icon in a back button?

Question

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:

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.

Answer 1

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.