ion-back-button is not showing up in toolbar in Ionic 5

Question

I'm trying to show a back button in the toolbar of one page. Below is excerpt of my code.

  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button [text]="" [icon]="arrow-back"> </ion-back-button>
    </ion-buttons>
    <ion-title>
      About
    </ion-title>
  </ion-toolbar>

If I set the defaultHref attribute, it works but I will not have ability to use my custom back button with text and icon.

  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="home"> </ion-back-button>
    </ion-buttons>
    <ion-title>
      About
    </ion-title>
  </ion-toolbar>

How do I make it work. Could anyone please help?

Answer 1

If you are trying to use a custom header (like me), this is the workaround that I found pretty easy to implement and works like it's supposed to.

/components/custom-header.html

<ion-toolbar>
  <ion-buttons slot="start">
    <ng-content></ng-content>
  </ion-buttons>
  <ion-title>Page title</ion-title>
</ion-toolbar>

And the usage will be like:

/pages/home-page.html

<ion-header>
    <custom-header>
       <ion-back-button></ion-back-button>
    </custom-header>
</ion-header>