Ionic Icon QR-Code is broken on Chrome

Ionic Framework Ionic Angular
1

Hello,

we update to Ionic 5 last month.
We use a barcode-scanner an therefor an ionic-button with ionic-icon “qr-code”.

In Chrome there a two of 3 locations in our app where the icon is broken:
qr-icon-broken
In Firefox there are no issues.

We use it like this:

<ng-container *ngIf="(qrCodeConfigKey$ | async) === 'true'">
  <ion-buttons>
    <ion-button slot="icon-only"
      class="barcode-scanner-button-component"
      (click)="showBarcodeScannerModal()">
      <ion-icon name="qr-code-outline" title="Barcode-Scanner"></ion-icon>
    </ion-button>
  </ion-buttons>
</ng-container>

Any ideas somebody?

2

I just tested it out in an app to see if it had any issues, and so far I’m not able to replicate

Screen Shot 2020-06-25 at 10.06.43 AM

I modified the markup a bit to just better test things.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button slot="icon-only">
        <ion-icon name="qr-code-outline" title="Barcode-Scanner"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>
      Tab 1
    </ion-title>
  </ion-toolbar>
</ion-header>
3

I found the problem.
In our case the Icon is shrinked to 19.5938px and this can be a problem for svg´s.
When i set the min-height and min-width to 20px it shows up correctly.

ion-icon {
    min-height: 20px;
    min-width: 20px;
}