Ionic Change back button icon for one page only

Question

Using app.module.ts, setting IonicModule.forRoot(MyApp,{backButtonIcon:"close"}) will set all the back icons in my app to close icon. However, I want to apply this in only a page or two of the app, and keep the rest with the default, or maybe third icon I choose. Does anyone know how can that be done without implementing my own button and functions for the back functionality?

I don't remember 100% thus I wont answer but navcontroller push takes the same options so navctrl.push(Page, { backButtonIcon:"something"}); should work — misha130
Thank you for your help. I tried your suggestion, but I noticed two things: 1) The NavOptions comes as a second parameter, and before it come the params, therefore it should be passed as third parameter to the push method. 2) The NavOptions have around 10 properties, such as animation and so on, but nothing for the backButtonIcon. If you could provide me with a solution, I would be grateful! — Floyd1256
Okay so I have managed to make it work, using a workaround provided here: [link]youtube.com/watch?v=e6PImZrumYo , which basically suggests replacing the navbar by a toolbar, and placing a button with navPop functionality. I don't think it's a correct answer, so still waiting for someone to give me a correct solution, but this is just in case someone wants a quick fix — Floyd1256
Fyi thats what I mostly do. I add hideBackButton and stick my own — misha130

Gilles Hoarau Gilles Hoarau · Accepted Answer · 2017-09-26T09:36:56

By having an ion-toolbar in the ion-header, it appears on top of the default ion-navbar. So it is a workaround to have a custom header bar with my close icon and my custom function gotoHome(). That's the best way i found to customize the 'navbar' for a particular page.

<ion-header>

    <ion-toolbar>
        <ion-buttons left>
            <button ion-button icon-only (click)="gotoHome()">
                <ion-icon name="close"></ion-icon>
            </button>
        </ion-buttons>
        <ion-title>Title</ion-title>
    </ion-toolbar>

</ion-header>

<ion-content padding>
    ...
</ion-content>

Ionic Change back button icon for one page only

1 Answers