ion-back-button not showing on Android device in Ionic 7 but works in the browser

Question

I'm wondering why the ion-back-button is not being displayed in my Ionic 7 app on an Android device, although it works fine in the browser. I've checked the structure of my pages, tabs and routing files and can't find any reason for this. I navigate from my home.page to my tabs.page which has children a, b and c.

Here my codes for the understanding: a.page.html, b.page.html, c.page.html (Tabs) => ion-back-button is not displayed in the toolbar

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>Gruppe</ion-title>
  </ion-toolbar>
</ion-header>

tabs.page.html

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="a">
      <ion-label>Tab 1</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="b">
      <ion-label>Tab 2</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="c">
      <ion-label>Tab 3</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

app.routes.ts

export const routes: Routes = [
  {
    path: 'home',
    component: HomePage,
  },
  {
    path: 'tabs/:id',
    component: TabsPage,
    children: [
      {
        path: 'a',
        component: APage,
      },
      {
        path: 'b',
        component: BPage
      },
      {
        path: 'c',
        component: CPage
      },
      {
        path: "",
        redirectTo: 'a',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: "",
    redirectTo: 'home',
    pathMatch: 'full',
  }

Solved it by simply using a regular button with a routerLink="/home" in my toolbar. The ion-back-button gets hidden by Ionic on that page

Answer 1

Solution:

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons class="btns" slot="start">
      <ion-button (click)="goHome()" class="btn">
        <ion-icon class="ico" name="chevron-back"></ion-icon>
        <p class="backText">Back</p>
      </ion-button>
    </ion-buttons>
    <ion-title>Gruppe</ion-title>
  </ion-toolbar>
</ion-header>

And the styling to make the button look like an ios back button:

    .btns{
    padding-left: 0px;
    margin-left: -8px;
    .btn{
        padding-left: 0px;
        margin-left: 0px;
        text-transform: none;

    }

}
.backText{
    padding-left: 1px;
    margin: 0px;
    font-size: 17px;
    letter-spacing: normal;
}

.ico{
    font-size: 27px;
    padding-bottom: 1px;
}

typescript:

goHome(){
    this.navCtrl.navigateBack('/home');
  }