Search code examples
ionic-frameworkionic2back-buttonionic3

Ionic Change back button icon for one page only


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?


Solution

  • 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>