Ionic 4 选项卡图标未正确显示答案

【问题标题】：Ionic 4 tab icons not showing correctlyIonic 4 选项卡图标未正确显示
【发布时间】：2018-11-02 11:08:46
【问题描述】：

最近我更新了 angular、cordova 和 ionic 版本，从那时起标签图标部分显示。假设我有 4 个选项卡，加载应用程序时会显示第一个和第三个图标。然后，如果我触摸一个“不可见”图标，这意味着如果选择了一个选项卡，该图标就会出现。当触摸另一个选项卡时，它会再次消失。显示所有选项卡标题。

感谢任何帮助。

<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 (cordova-lib@8.1.1)

$ 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

【问题讨论】：

标签： angular typescript ionic-framework tabs icons

【解决方案1】：

这是自 2017 年 9 月 18 日以来一直存在的问题，当时 Ionic 团队 released Ionicons v4。

在 Ionicons v4 中，Ionic 团队 removed all the "...-outline" icons。

但是，<ion-tab> 在 iOS 上仍然存在 Ionicon 在未选中状态时将“-outline”附加到 Ionicon 名称的行为。在这里，当我们点击离开搜索图标时，我们看到添加了“-outline”：

这会导致未选中的标签有一个消失的图标。

我发现的最简单的解决方法是明确要求 Material Design 或“md-”series of icons。这意味着你不能使用原生 iOS 图标，但至少它们不会在你身上消失。

<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>

Ionic forums 上也描述了此问题。

【讨论】：

【解决方案2】：

我解决了从 ionicons 下载 svg 的问题

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

【讨论】：