Navbar MenuToggle Icon Not Showing Up


I just updated to Ionic v 2.2 and the icon “start” / “menu toggle” in the navbar stopped showing up because of the following css (part of the ionic css), any idea why we added it in this version ?

Thank you !


.hide, [hidden], template {
    display: none !important;


<ion-header [class.header-fullscreen]="sidebarCollapsed">
        <button ion-button icon-only menuToggle>
            <ion-icon name="menu"></ion-icon>
1 Like

I still see the hamburger menu. Just noticed that I use the attribute “start”, could it be the reason?


    <ion-navbar hideBackButton="true">

        <button ion-button icon-only menuToggle start>
            <ion-icon name="menu"></ion-icon>

i am having the same problem, is this the problem with user code or issue in @ionic

What problem exactly - something not showing up with Ionic 2.2? Then upgrade to a recent version.
If you have another problem, please describe it.

Add the persistent=“true” attribute to your ion-menu tag in your app component.

I am also having same issue . I have added persistant = true in ion-menu but it still didnt resolve my issue. When i use this.navCtril.setRoot(pageName). Then i can see my icons otherwise i cannot see my icons

I had the same problem until I stumbled upon the following on Menu Component page in the docs:

To add a menu to an app, the <ion-menu> element should be added as a sibling to the ion-nav it will belongs to. A local variable should be added to the ion-nav and passed to the ion-menus content property.

So in your app.html file you need something like this:

<ion-menu [content]="mycontent">

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

The local variable is “mycontent” in the above case.



display: block !important;

This saved my day.
Just add a class to the button with the above css.


Check “Persistent Menus” on the doc:

An easier way to handle this than hard-coding a style.

You need to add attribute persistent="true" to <ion-menu> then menuToggle button will be available on all views. You can find more details here in the docs


:joy::rofl: Thank you bro


Hello, I am facing same issue in ionic v4 (Icon is not displaying)


    <ion-buttons slot="start">
          <ion-icon slot="icon-only" name="menu"></ion-icon>
    <ion-title start>Header</ion-title>
<ion-content padding>
  <h1>Main Content</h1>
  <p>Click the icon in the top left to toggle the menu.</p>

if you fully reload your browser view, the icon is displayed?

display: block !important;

This was magic! Can you pls explain how it worked , I am new to Javascript stack.

1 Like

thanks bro,
it works for me

That was it for me. Thaks!