Ionic v4: place Logo in center of ion-header

Issue

   <ion-header mode="ios">
     <ion-toolbar class="ion-no-padding" mode="ios" color="secondary">
      <ion-buttons mode="md" slot="start">
        <ion-button (click)="toggleMenu()">
         <ion-icon slot="icon-only" src="assets/icon/hamburger.svg"></ion-icon>
        </ion-button>
      </ion-buttons>
      <ion-title>My Navigation Bar</ion-title>
    </ion-toolbar>
 </ion-header>

This works perfectly for the Ion title in the center. I want to add a logo to the center instead of the text. Tried adding ion-icon inside ion-title but it didn't work.

    <ion-title>
     <ion-icon slot="icon-only" src="assets/icon/logo.svg"></ion-icon>
    </ion-title>

Solution

Why don't you use ion-text-center for the ion-title?

<ion-header>
  <ion-toolbar>
    <ion-title class="ion-text-center">
      <ion-img src="../../assets/img/logo.png"></ion-img>
    </ion-title>
  </ion-toolbar>
</ion-header>

Answered By - Tomas Vancoillie