Move icon to the right side of a nav-title

Question

I want to create an app with a side menu and a title in the nav-title. On the right side of the nav-title i would place a icon.

This is my current code:

<ion-view>
    <ion-nav-title align-title="center">
        <h1 class="title">Title</h1>
        <img src="./img/MyIcon.ico" height="40px" width="auto">
    </ion-nav-title>
  <ion-content>
  ...
  </ion-content>
</ion-view>

At the moment the title and the icon are both centered.

Is there a way to place the icon on the right side?

Answer 1

You could take the image line out of </icon-nav-title> (which is centered), or float your image to the right with:

<img src="./img/MyIcon.ico" height="40px" width="auto" style="float:right">

You may want to try creating a CSS for this as well.