Home button in the Ionic-footer of Ionic mobile is not visible, but previous and next buttons are visible. I need help to resolve this

Issue

I am new to Ionic mobile app, and using latest versions of Angular and Ionic (17.0.5 and 7.1.5 respectively). For navigation I have added 3 buttons (Previous, Home and Next buttons) as below:

<ion-footer>
 <ion-toolbar>
  <ion-buttons slot="start" *ngIf="showPreviousButton()">
    <ion-button [routerLink]="['/previous']">
      <ion-icon name="arrow-back"></ion-icon>
    </ion-button>
  </ion-buttons>

  <ion-buttons slot="center">
    <ion-button [routerLink]="['/main']">
      <ion-icon name="home"></ion-icon>
    </ion-button>
  </ion-buttons>

  <ion-buttons slot="end" *ngIf="showNextButton()">
    <ion-button [routerLink]="['/next']">
      <ion-icon name="arrow-forward"></ion-icon>
    </ion-button>
  </ion-buttons>
 </ion-toolbar>
</ion-footer>

in the app.component.html.

The Previous button and Next button are visible along with the conditions I check with their respective methods in 'app.component.ts' file, but the home button in the slot "center" is not visible. I tried so many things such as keeping the home button alone etc. still the home button is not visible. It has all the features as that of Previous and Next buttons still is not visible. Not able to understand the reason for this issue. Can someone provide some insights to solve this issue?

There is no error message in the development console to fix. I kept Home button alone removing others. Moved the Home button to other pages, Moved the entire navigation bar etc. Still the same issue repeats.

Solution

The ion-buttons doesn't have a slot="center" property. That's probably why it doesn't appear.

You'll need to center the button yourself. Easy way is to use the class ion-text-center. Or you can use flexbox etc.

  <ion-footer>
  <ion-toolbar>
   <ion-buttons slot="start">
     <ion-button>
       <ion-icon name="arrow-back"></ion-icon>
     </ion-button>
   </ion-buttons>
 
   <div class="ion-text-center">
     <ion-button>
       <ion-icon name="home"></ion-icon>
     </ion-button>
    </div>
 
   <ion-buttons slot="end">
     <ion-button>
       <ion-icon name="arrow-forward"></ion-icon>
     </ion-button>
   </ion-buttons>
  </ion-toolbar>
 </ion-footer>

More infos on button placement

Answered By - uKioops