On a specific page I need a “+” icon on the left corner of the navbar generally where the back button appears when there is a previous page in the nav stack. I added an icon on the left edge with this code:
<ion-header> <ion-navbar> <ion-buttons> <button ion-button icon-only> <ion-icon name="ios-add"></ion-icon> </button> </ion-buttons> <ion-title>channel-list</ion-title> <ion-buttons end> <button ion-button menuToggle icon-only> <ion-icon name="menu"></ion-icon> </button> </ion-buttons> </ion-navbar> </ion-header>
The icon “+” appears, but exactly at the same place back button would appear, it is more to left as compared to the menu button on the right it has a good space from its edge.
See this screenshot,
The “+” button is on inside the toolbar-content but menu is out of it. I have both the
ion-buttons element inside of
ion-navbar still the button on the left somehow is pushed inside of toolbar-content container
How do I make sure that a button on the left is position in the DOM exactly like the button on the right so the padding / margin and any spacing is consistent.