Ionic show menu navigation icon - ionic2

Question

I am a beginner in Ionic, trying to display a side menu page when users clicks on a button. Instead, what I'm still getting is the back button. Here's my code:
//menu .html
<ion-header>
<ion-navbar>
<ion-title>menu</ion-title>
<ion-buttons start>
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
//app.html
<ion-menu [content]="content">
<ion-content padding>
<h2>This is a cool menu</h2>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content></ion-nav>
What am I doing wrong?

Answer 1

Intro
Ok so, ionic's navigation works like a stack. You push a component on the stack, pop it off or create a new stack.
To push a component on the stack you'll need to call (if you call your NavController navCtrl) navCtrl.push(someComponent);
To pop a component, call navCtrl.pop(someComponent);
To create a new stack, call navCtrl.setRoot(someComponent);
Why is this important?
If you want the menu-icon to show, the page has to be at the lowest level of the stack, this is in ionic called the root.
When a page is not root, the menu-icon will magically transform into a back-button, so you can go back to your root page. (f.e. when you want to see more details about an item)
Sure, not really reading anymore, but what do I need to do?
Well, first of all, just include the <ion-header> on your page, since you want to show the icon on your page. In your code, you're trying to get a menu-icon in your ion-menu (which is your sidemenu).
So you will have something like the following, create your menu in app.component.html
app.component.html
<ion-menu type="overlay" [content]="content">
<ion-content>
<button menuClose icon-only>
<ion-icon name="close"></ion-icon>
</button>
<button menuClose>
My Custom button WHOOOOO
</button>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
page1.html
<ion-header>
<ion-navbar>
<ion-title>Page 1 FTW</ion-title>
<ion-buttons start>
// So this icon will change depending on the page's place in the ionic Stack
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<button ion-button menuToggle>Open my great menu!</button>
</ion-content>
Now in your app.component.ts you want to make Page1 the root, this way you'll see your menu icon in the header.
This can easily be done by changing the rootPage property of AppComponent.
Simply import { Page1 } from 'your/page1/location' and call (in constructor f.e. this.rootPage = Page1;;
Now Page1 will have a menu-icon in it's header which will show your menu!
If you want to include a button which opens your menu, just add the menuToggle property to it.

Answer 2

Your tags seems to be in a wrong order. Can you try with code bellow?
<ion-menu>
<ion-header>
<ion-navbar>
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Menu</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2>This is a cool menu</h2>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>