Replace back button icon for my own in Ionic 3


#1

Hello, I need to replace the back button on the pages nav for my own.

I’ve managed to do it with this code:

<ion-navbar color="primary" hideBackButton>
    <button ion-button navPop>
      <i class="icon icon-arrow-left icono-header" aria-hidden="true"></i>
    </button>
    <ion-title text-center>Page</ion-title>
  </ion-navbar

But the problem is that with this approach there is a kind of delay for the button to dissapear after pressing it and going back to the previous page. I mean, it goes back to the previous page instantly, but it takes the button like 2s to dissapear.

Btw, I’m forced to use the tag to set the icons due to company guidelines.

Thanks


#2

In app.component.ts


import { Config, Nav, Platform } from 'ionic-angular';

...

  private getPlatformInfo() {

    if (this.platform.is('mobileweb') || this.platform.is('core')) {
      this.logger.info('The Application is running in a browser');
    } else {
      this.logger.info('The Application is running on a device');
    }

    if (this.platform.is('android')) {

      this.logger.info('The Platform is Android');
      this.config.set('mode', 'md');
      this.config.set('backButtonIcon', 'fa-fal-arrow-left');

    } else {

      this.logger.info('The Platform is iOS');
      this.config.set('mode', 'ios');
      this.config.set('backButtonIcon', 'fa-fal-angle-left');
    }

  }

#3

Thanks robinyo but I found out that I only had to wrap the <button> tag into an <ion-buttons> tag.

I did it like this because I need different back buttons on different page, tried your approach and works too, thanks!