Ionic 2 / 3 / 4 : How to align button in the header to the right side of header

Question

How can I align with the right side, the button is showing on the left of the header without compose icon.

Here is what I'm doing:

<ion-toolbar>
<ion-title>TODO APP</ion-title>
<button class = "button button-icon">
    <i class="icon ion-compose"></i>
</button>
</ion-toolbar>

Answer 1

Ionic 2 / Ionic 3 has something for that, just look at the following code :

<ion-header>
  <ion-navbar primary>
    <ion-buttons start>
      <button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
    </ion-buttons>

    <ion-title>
      My Page
    </ion-title>

    <ion-buttons end>
      <button (click)="myFunction()" ion-button icon-only>
        <ion-icon name="search"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

The advantage of solving your problem this way is that your navbar will automatically respect the android/ios/windows guidelines. So this way you improve the quality of your app.

More informations about the guidelines :

Android : https://developer.android.com/guide/practices/ui_guidelines/index.html

iOS : https://developer.apple.com/ios/human-interface-guidelines/

Windows : https://developer.microsoft.com/en-us/windows/design

Answer 2

ionic 4 ion-navbar is replaced by ion-back-button and in Ionic 4 back button be like

<ion-header>
  <ion-toolbar>
       <ion-buttons slot="start">
  <ion-back-button></ion-back-button>
       </ion-buttons>
    <ion-title>
     Home
    </ion-title>
      <ion-button slot="secondary">
        <ion-icon name="search"></ion-icon>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

Answer 3

You can add button in right side in header in ionic 2.0

<ion-navbar *navbar>
    <ion-title>
        TODO APP
    </ion-title>
    <ion-buttons end>
        <button ><ion-icon name="home"></ion-icon></button>
    </ion-buttons>
</ion-navbar>

You can add your custom icon's css class like this

css

.ion-ios-custom:before {
    background-image: url("image-icon.png");        
 }

OR

.ion-ios-custom:before {       
   content: "\f439"; /* your font code */
 }

OR

.ion-ios-custom:before {
   content: url("image-icon.png") !important;
}

html

<ion-icon name="custom"></ion-icon>

Answer 4

It's work for me.

Ionic 4 - Header

<ion-header>
   <ion-toolbar color="primary">
      <ion-title class="titleHeader">User Detail</ion-title>
      <ion-buttons slot="end">
            <ion-back-button defaultHref="/"></ion-back-button>
      </ion-buttons>
   </ion-toolbar>
</ion-header>