Ionic Navbar buttons not positioning correctly

I want to place my share button to the right of an ion-navbar. However, following the docs doesn’t seem to be helping.

It keeps giving me this result:

Here’s the code:

    <button ion-button icon-only menuToggle>
      <ion-icon name="menu"></ion-icon>
    <ion-title>Test Podcast</ion-title>

    <ion-buttons right>
      <button ion-button icon-only clear (click)="presentPopover($event)">
        <ion-icon name="share"></ion-icon>

I also tried changing <ion-buttons right> to <ion-buttons end> and it gave me the same result. Lots of other articles regarding this all around, but none of them are helping me.

What is you ionic info output?
As you figured out yourself stuff changed with the positioning of elements in the last few versions.

$ ionic info

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 6.5.0
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : android 6.1.2
    Ionic Framework                 : ionic-angular 3.3.0


    Node       : v6.11.0
    OS         : Windows 10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 3.10.10

BTW, removing this seems to solve my problem:

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

But, yeah. I do have to find a workaround now…

I would use start and end as it says in the docs and wrap both <button> in an <ion-buttons> component.