Iva Pesa
Iva Pesa

Reputation: 47

Ionic 4 tab icons not showing correctly

Recently I’ve updated angular, cordova and ionic versions and from then the tab icons are showing partially. Say I have 4 tabs, there are shown the first and the third icons when app is loaded. Then if I touch one “invisible” icon, it means if a tab is selected, the icon appears. when touch another tab, it disappears again. All the tab titles are displayed.

Any help is appreciated.

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
 <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"> 
</ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion- 
 tab>
<ion-tab [root]="tab4Root" tabTitle="Impostazioni" tabIcon="settings"></ion- 
tab>

$ ionic --version
4.3.0

$ cordova --version
8.1.2 ([email protected])

$ npm --version
5.6.0

"dependencies": {
"@angular/animations": "7.0.2",
"@angular/cli": "^7.0.3",
"@angular/common": "7.0.2",
"@angular/compiler": "7.0.2",
"@angular/compiler-cli": "7.0.2",
"@angular/core": "7.0.2",
"@angular/forms": "7.0.2",
"@angular/http": "7.0.2",
"@angular/platform-browser": "7.0.2",
"@angular/platform-browser-dynamic": "7.0.2",
"@ionic-native/contacts": "^4.15.0",
"@ionic-native/core": "^4.16.0",
"@ionic-native/globalization": "^4.16.0",
"@ionic-native/local-notifications": "^4.15.0",
"@ionic-native/splash-screen": "~4.16.0",
"@ionic-native/sqlite": "^4.16.0",
"@ionic-native/status-bar": "~4.16.0",
"@ionic/storage": "2.2.0",
"@ngx-translate/core": "^11.0.0",
"@ngx-translate/http-loader": "^4.0.0",
"cordova-android": "7.1.1",
"cordova-browser": "5.0.4",
"cordova-plugin-badge": "^0.8.7",
"cordova-plugin-contacts": "^3.0.1",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-globalization": "^1.11.0",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^2.2.0",
"cordova-plugin-local-notification": "^0.9.0-beta.2",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"cordova-sqlite-storage": "^2.5.0",
"ionic-angular": "3.9.2",
"ionicons": "4.4.6",
"node-sass": "^4.9.4",
"rxjs": "6.3.3",
"rxjs-compat": "^6.3.3",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.26"
 }

"devDependencies": {
"@ionic/app-scripts": "^3.2.0",
"typescript": "~3.1.5"
 },

 Android device version: 5.1

Upvotes: 1

Views: 2977

Answers (2)

Gonzalo
Gonzalo

Reputation: 1

i solved downloading svg from ionicons

<ion-tab-button tab="map">
  <ion-icon src="./assets/icon/map-sharp.svg"></ion-icon>
</ion-tab-button>

Upvotes: 0

Michael B. Currie
Michael B. Currie

Reputation: 14708

This has been an issue since 18 Sep 2017, when the Ionic team released Ionicons v4.

enter image description here

  • But, <ion-tab> still has the behaviour on iOS that the Ionicon when it's in the not selected state, appends "-outline" to the name of the Ionicon. Here we see "-outline" get added as we click away from the search icon:

enter image description here

Together, that causes unselected tabs to have a disappearing icon.

The simplest workaround I found is to explicitly ask for the Material Design or "md-" series of icons. This means you can't use native iOS icons, but at least they won't disappear on you.

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="md-home">
  </ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="md-information-circle"> 
  </ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="md-contacts">
  </ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="Impostazioni" tabIcon="md-settings">
  </ion-tab>

This issue was also described on the Ionic forums.

Upvotes: 3

Related Questions