Search code examples
androidiconstoolbarionic4capacitor

The toolbar not show icon. the text changed his color and toolbar altered his height in Android-Ionic 4


I'm developing a simple app using ionic 4 with angular, when I compiled with capacitor and run in android, the toolbar changed. Not show correctly. The text change white for black, the trash icon not show and the height of the toolbar increase. Other functions works correctly

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/recipes"></ion-back-button>
    </ion-buttons>
    <ion-title>recipe-detail</ion-title>
    <ion-buttons slot="primary">
      <ion-button (click)="onDeleteRecipe()"><ion-icon name="trash" slot="icon-only"></ion-icon></ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

the toolbar should have white text and trash icon

enter image description here


Solution

  • The repo works as expected, here is my info:

    Ionic:
       ionic (Ionic CLI)             : 4.12.0 (/usr/local/lib/node_modules/ionic)
       Ionic Framework               : @ionic/angular 4.2.0
       @angular-devkit/build-angular : 0.13.8
       @angular-devkit/schematics    : 7.2.4
       @angular/cli                  : 7.3.8
       @ionic/angular-toolkit        : 1.4.1
    
    Capacitor:
       capacitor (Capacitor CLI) : 1.0.0-beta.19
       @capacitor/core           : 1.0.0-beta.19
    
    Cordova:
       cordova (Cordova CLI) : 8.1.2 ([email protected])
       Cordova Platforms     : none
       Cordova Plugins       : no whitelisted plugins (0 plugins total)
    
    System:
    
       Android SDK Tools : 26.1.1 (/Users/jayordway/Library/Android/sdk)
       ios-deploy        : 1.9.4
       NodeJS            : v10.14.2 (/usr/local/bin/node)
       npm               : 6.9.0
       OS                : macOS Mojave
       Xcode             : Xcode 10.2 Build version 10E125