ion-back-button and ion-menu-toggle not visible on iOS

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI) : 4.1.2

System:

   NodeJS : v8.11.4
   npm    : 6.4.1
   OS     : macOS High Sierra

Packaged Versions

{
  "@ionic/core": "4.0.0-beta.8",
  "@stencil/core": "0.12.4"
}

Describe the Bug

The ion-back-button doesn’t show the icon on iOS.

Steps to Reproduce

1. Create and run an Ionic PWA Stencil project:

npx create-stencil ionic-pwa
npm i -D -E @capacitor/cli @capacitor/core
npx cap init <name> <app-id>
npx cap add ios
npx cap add android

npm start

1. Change the emulated device in Chrome dev tools to an iOS device and reload.
2. Switch to the profile route.
3. The button exists (can be clicked and inspected) but the icon is invisible.

Related Code

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/" />
    </ion-buttons>
    <ion-title>Profile: {this.name}</ion-title>
  </ion-toolbar>
</ion-header>

Expected Behavior

The icon should be visible.

Additional Context

Adding mode="md" to the ion-back-button component kind of fixes it: on iOS it actually shows the proper iOS back icon (chevron), not the Android back icon (arrow). However as I understand setting mode to md should also change the icon to the Android icon? The only way of forcing it to use the Android Icon is to run setupConfig({ mode: 'md' }).

[cthos]

Can confirm I’m seeing this issue as well.

I think this is related to there being a

.sc-ion-back-button-ios-h {
  color: var(--ion-color-base);
}

Somewhere, which is making the color match the background?

I tossed a

.sc-ion-back-button-ios-h {
  color: white;
}

in my global.scss and it seems to be back?

[paulstelzer]

I have added a PR -> #15847

They have fixed the back-button few weeks ago, but not the menu-button. I just fixed the problem with the color, but they have to add a lot of more css variables like they did at the back-button. So I don’t know if they merge it or if they fix the whole menu-button soon