Ionic: custom icon in the back button - how?

Question

Hello, I have the following code:

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

Which produce the following output:

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

How can I do it right in Ionic?

I tried to follow the instructions in the following topic: http://forum.ionicframework.com/t/how-to-use-custom-icons-with-tabs-0-9-26/1628

But no luck.

Thanks so much for any advice.

Answer 1

There is an easy way to solve your problem, just type in your .js:

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

(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; } 

This example can be run in this link

Another solution might 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: the ionic blog somehow suggests using font icons, but from my point of view it makes no sense when there are several icons. Read this link.

I hope you find this information useful.

Answer 2

Just do it!:)

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

Use the class = "" attribute to set your own icon. In this case, I used ion-chevron-left (to be similar to your example) ..!

But if you also want to change the default text, you can do it differently:

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

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