Hamburger icon reloading every time setRoot called

I’m using the following code on my pages -

        <ion-col class="pull-left"><ion-icon name="person" (click)="rootPage(profilePage)"></ion-icon></ion-col>
        <ion-col class="pull-right"><ion-icon menuToggle name="menu"></ion-icon></ion-col>
  <div class="subheader">

The problem I am experiencing is that the Hamburger icon (name=“menu”) reloads each time a new page is navigated to. This doesn’t happen with the user icon.

When a user clicks on a button to navigate to a new root page the hamburger icon disappears and then reappears.

What could be causing this? Is there a fix?

I think I might have found the reason for this -

I’ve removed menuToggle from the icon and now the icon “flashes” (disappears then reappears) about once every 3-5 times.

The first time it “flashes” after about the third page load. This one is the slowest i.e. the icon disappears for about half a second.

After that the “flashes” are quite rapid.

I can confirm that this is definitelycaused by menuToggle.

I had left menuToggle on one of the pages in my last test. Once I removed that instance the hamburger icon now consistently stays on the page.

I have tried -

  • Using menuToggle on the element
  • Moving menuToggle to the element
  • Wrapping with a and putting menuToggle on the button element. The button element is still inside the element

I will try


Using has resolved this.

Here’s the code:


import {Component} from '@angular/core';
import {NavController, MenuController} from 'ionic-angular';



export class ExamleComponent {

  constructor(private nav: NavController, private menu: MenuController) {


  openMenu() {;



<ion-col class="pull-right"><ion-icon name="menu" (click)="openMenu()"></ion-icon></ion-col>