Ionic tabs inactive icon color not show on iOS


I use ionic-v3 to create a Tabs App. There is issue that tabs inactive icon color not visible on iOS

In my variables.scss I set tabs colors like this:

$tabs-background: color($colors, primary); // #2094A7
$tabs-tab-color-inactive: #142735;
$tabs-tab-color-active: #FFFFFF;
// For iOS
$tabs-ios-tab-text-color: $tabs-tab-color-inactive;
$tabs-ios-tab-icon-color: $tabs-tab-color-inactive;
$tabs-ios-tab-text-color-active: $tabs-tab-color-active;
$tabs-ios-tab-icon-color-active: $tabs-tab-color-active;

In my tabs.scss:

page-tabs {
.tab-button-text {
font-family: $font-montserrat-semibold;
font-size: 3.5vw;

All right on Android

and on iOS, the text color show correctly and the active icon color is right too just like the photo.

when I test on browser, I found the color property of tabs ion-icon has correctly setted

by example for the tab calendar:

So is anyone has this issue and how do you solved?


On iOS, I found when I selected a tabs, there a ::before in ion-icon, and it define icon content and display style, but for those tabs who are not selected, there is no ::before in ion-icon.

Look the photo below: