Menu Icon Loads Late

I have a menu icon that will sometimes not show up until half a second after the title appears. To me this looks shabby.

Is there a way to fix this?

If not I will just carry on.

Are you using the default starter ionic project? Have you modified any code? Can you show some code, so we can look, if anything is not correct?

I used the blank template. My project is pretty big and I have made some changes to the app.component.ts. I will make a new project to compare then I will return with my app component code.

The same thing happens in a fresh project.


<ion-menu [content]="mycontent">
      <p>some menu content, could be list items</p>

<ion-nav #mycontent [root]="rootPage"></ion-nav>


    <button ion-button large menuToggle>
      <ion-icon name="menu"></ion-icon>
      Ionic Blank

<ion-content padding>
  <button ion-button (click)="reloadPage()" >Reload Page</button>


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

  selector: 'page-home',
  templateUrl: 'home.html'
export class HomePage {

  constructor(public navCtrl: NavController) {



I’m going to tally this up to how ionic loads components within the header. But it doesn’t look too good when that menu icon flickers between leaving and entering the view.

There seems to be a problem with menuToggle. If i use a workaround with a normal button, it works as intended.

<ion-buttons left>
  <button ion-button large (click)="menuCtrl.toggle()" margin-horizontal>
    <ion-icon name="menu" style="font-size: 1.7em" ></ion-icon>

Here you can see it in action:

I created an issue:

Thank you for this work around. Everything loads super smooth.