Ionic 2/3/4 Custom Back Button

Question

I would like to change the ion-icon used in my navbar's back button, which appears when a page has been pushed onto the nav stack. Here is my code:

<ion-header>
   <ion-navbar>
      <button ion-button icon-only menuToggle>
        <ion-icon [name]="navbarIcon"></ion-icon>
      </button>
    <ion-title>Title</ion-title>
  </ion-navbar>
</ion-header>

The "name" directive affects the appearance of the menu toggle button, but it has no effect on the back button. Is there a way to modify my code so I can change the icon displayed in the back button?

I looked at this question, but it is for Ionic 1 and I also think there should be a better way.

Edit: I found a different way to solve my problem, but I would still like some input on this. — Neil

RamY RamY · Accepted Answer · 2018-09-05T04:00:59

I was able to do this by hiding the default back button and adding a custom one.

In the Page where I need the custom back button, just set the header as below

<ion-header>
  <ion-navbar hideBackButton="true">
    <ion-title>Details</ion-title>
    <ion-buttons left>
        <button ion-button navPop icon-only>
      <ion-icon name="exit"></ion-icon>     
    </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

Stackblitz link with working demo: https://stackblitz.com/edit/ionic-jihfrp

Ionic 2/3/4 Custom Back Button

1 Answers