can't move icon button to right - html

Question

I'm having issues moving the '+' button to the right of the words 'Popular'.
Here's the code:
<ion-header>
<ion-navbar color="navbar">
<ion-buttons left>
</ion-buttons>
<ion-title text-center>Popular Itineraries</ion-title>
<div right>
<img src="assets/img/ic-add.png" (click)="openModal()"/>
</div>
</ion-navbar>

Answer 1

I notice in Ionic framework, you can not use things like right in a div and expect it to float right, Simple set a class name or an id name for your div or img and in the style, you can simple do something like this: assume the id for our div is img, then we can have something like this:
#img{
float: right;
}
Another thing you can do if the above method did not work is
#img{
right: 0;
position: absolute; //This one usually work in most case
}

Answer 2

If you follow docs you should use “start” and “end” with ion-buttons to place buttons and a like elements within toolbar or navbar:
Example:
<ion-buttons end>
      <button ion-button clear icon-start>
        <ion-icon name="aperture"></ion-icon>
        Snip!
      </button>
</ion-buttons>
Here is an example from production app:
<ion-header>
  <ion-navbar>
    <ion-buttons start>
      <button [disabled]="false" ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>
      <ion-col>
        Publisher<br>
        <ion-icon *ngIf="!foundation.appIsOnline || foundation.offGridMode" name="warning" isActive="false" color="danger" >
            <small>Offgrid</small>
        </ion-icon>
      </ion-col>
    </ion-title>
    <ion-buttons end>
        <button (click)="loadProfilePage()" ion-button clear item-end icon-right>100
          <ion-icon name="contact"></ion-icon>
        </button>
      </ion-buttons>
  </ion-navbar>
  <ion-toolbar>
      <ion-buttons start>
          <button ion-button clear icon-start (click)="matrix3d()">
            <ion-icon name="glasses"></ion-icon>
            Matrix3D
          </button>
        </ion-buttons>
      <ion-title class="centrify">
        <button (click)="loadTutorialsPage()" ion-button clear icon-start>
          <ion-icon name="school"></ion-icon>
          Learn
        </button>
      </ion-title>
      <ion-buttons end>
        <button ion-button clear icon-start (click)="saveSceneAsPNG()">
          <ion-icon name="share"></ion-icon>
          Share
        </button>
      </ion-buttons>
    </ion-toolbar>
</ion-header>
In your case if you want users to see only icon as button you can use “icon-only” as attribute for button. Check official docs for more details