Search code examples
htmlcssionic-frameworkionic2

Ionic 2 navbar icons on both side of title


I'm trying add two icons in each sides of a ion-header where the title is in the center, but it always ends up with the two icons on the right side.

This is my code

<ion-header>
  <ion-navbar color="primary">
    <ion-buttons start>
      <button ion-button icon-only><ion-icon name="chatboxes"></ion-icon></button>
    </ion-buttons>
    <ion-title>Title</ion-title>
    <ion-buttons end>
      <button ion-button icon-only><ion-icon name="notifications"></ion-icon></button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

which results in this header:

Ionic 2 header

I can't figure it out, tried different kind of tutorials and trying to copy their example without any success. There's no styling behind it either, so nothing should mess up the layout. It feels like the "start" element is bugged in this version of Ionic or something. Could someone pinpoint me to the right direction?

This is my output when running "ionic info":

Your system information:

 ordova CLI: 6.5.0
Ionic Framework Version: 2.1.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.3
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.5
Xcode version: Not installed

Solution

  • I used left instead of start

    check this plunker

    <ion-header>
      <ion-navbar color="primary">
        <ion-buttons left>
            <button ion-button icon-only>
              <ion-icon name="chatboxes"></ion-icon>
            </button>
        </ion-buttons>
        <ion-title>Title</ion-title>
        <ion-buttons right>
          <button ion-button icon-only><ion-icon name="notifications"></ion-icon></button>
        </ion-buttons>
      </ion-navbar>
    </ion-header>