Ionic 2 navbar icons on both side of title

Question

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:

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>

Comments

[Huiting]

I am assuming you are using android as there is no xcode version. From the documents, it says: start Positions element to the left of the content in ios mode, and directly to the right in md and wp mode This means what you are seeing is correct since it is not ios.

[Huiting]

Take a look here: ionicframework.com/docs/v2/api/components/toolbar/Toolbar

[Huiting]

Maybe try out the property left which Positions elements to the left of all other elements

[Sam]

Yes, I developed it in Android and completely missed that out. Completely noobish mistake. Thank you.

[captain_jim1]

God this was tough to find. Why they normally use "start", but then require "left" in other places is confusing as sh*t!