自定义图标选项卡离子 3

Question

我正在尝试为离子选项卡应用自定义图标，但它仅显示非活动选项卡图标，单击另一个选项卡时它没有显示任何内容

标签.scss 文件

.tabs{
a[aria-selected=false]{
.ion-md-tab1 {
max-width: 26px !important;
content: url("../assets/imgs/inactive-tab1.png") !important; }
}
.ion-md-tab2 {
max-width: 26px !important;
content: url("../assets/imgs/inactive-tab2.png") !important; 
}
}
a[aria-selected=true]{
.tabs-md-tab1 {
max-width: 26px !important;
content: url("../assets/imgs/active-tab1.png") !important;
}
.ion-md-tab2 {
max-width: 26px !important;
content: url("../assets/imgs/inactive-tab2.png") !important; 
}
}
}

选项卡.html

<ion-tabs>
<ion-tab [root]="tab1Root" tabIcon="tab1"></ion-tab>
<ion-tab [root]="tab2Root" tabIcon="tab2"></ion-tab>
</ion-tabs>

Answer 1

.tabs{
.ion-md-tab1[ng-reflect-is-active="true"] {
max-width: 26px !important;
content: url("../assets/imgs/inactive-tab1.png") !important; }
.ion-md-tab2[ng-reflect-is-active="true"] {
max-width: 26px !important;
content: url("../assets/imgs/inactive-tab2.png") !important;}
.tabs-md-tab1[ng-reflect-is-active="false"] {
max-width: 26px !important;
content: url("../assets/imgs/active-tab1.png") !important;
}
.ion-md-tab2[ng-reflect-is-active="false"] {
max-width: 26px !important;
content: url("../assets/imgs/inactive-tab2.png") !important; 
}
}

Answer 2

如果您需要在应用程序中使用自定义图标，这里有一个非常适合我的解决方案。

1. 将您的.svg图标文件放入：

   /src/assets/icons/...

2. 在您的 app.scss 文件中，添加以下 scss 代码：

   ion-icon {
   &[class*="prefix-"] {
   mask-size: contain;
   mask-position: 50% 50%;
   mask-repeat: no-repeat;
   background: currentColor;
   width: 1em;
   height: 1em;
   }
   // custom icons
   &[class*="prefix-categories"] {
   mask-image: url(../assets/icon/ic_categories.svg);
   }
   &[class*="prefix-menu"] {
   mask-image: url(../assets/icon/ic_menu.svg);
   }
   }
   

3. 并在您的 HTML 选项卡上在此处编写代码

   <ion-tabs>
   <ion-tab [root]="tab1Root" tabTitle="Title" tabIcon="prefix-name"></ion-tab>
   </ion-tabs>
   

Answer 3

ng-reflect-is-active="true"

在生产构建中不起作用，请使用这个; 它对我来说很好用：

.tabs {
a[aria-selected=true] {
.ion-md-tab1 {
max-width: 26px !important;
background: url("../assets/imgs/svg/ic_home_active.svg") no-repeat 50% 50%;
}
}
}