Ionic 4标签图标无法正确显示

Question

最近，我更新了角度版，科尔多瓦版和离子版，从那时起，标签图标会部分显示。假设我有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

Answer 1

自2017年9月18日离子团队released Ionicons v4以来，这一直是一个问题。

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

• 但是，<ion-tab>在iOS上仍然具有以下行为：当Ionicon处于未选中状态时，会将“ -outline”附加到Ionicon的名称上。在这里，当我们单击搜索图标时，我们看到添加了“-大纲”：

这一起导致未选中的标签的图标消失。

我发现的最简单的解决方法是显式地请求“材料设计”或“ 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中也描述了此问题。

Answer 2

我解决了从ionicon下载svg

integer