Ion-tab tabIcon in IOS only show the selected tab

Ionic Framework ionic-v3
1

Hi, I have a problem with my app when I am on iOS, here is my config

Ionic:

   ionic (Ionic CLI)  : 4.1.1 (C:\Users\XXXXXX\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

System:

   NodeJS : v8.9.4 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.0
   OS     : Windows 10

My tab menu has this configuration:

<ion-tabs [selectedIndex]="mySelectedIndex">
  <ion-tab [root]="tab1Root" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabIcon="card"></ion-tab>
  <ion-tab [root]="tab3Root" tabIcon="heart" tabBadge="{{$numItemsInWishList > 0 ? $numItemsInWishList : '' }}" tabBadgeStyle="dark"></ion-tab>
  <ion-tab [root]="tab4Root" tabIcon="basket" tabBadge="{{$numItemsInCart > 0 ? $numItemsInCart : '' }}" tabBadgeStyle="dark"></ion-tab>
  <ion-tab [root]="tab5Root" tabIcon="contact"></ion-tab>
</ion-tabs>

When I use android style, all this tabIcons shows properly, but when I select a ios profie in chrome debugger tools, only show me the selected tab.

I have inspected these tabs, and I think it’s due for it inserting a outline ios style when its not the selected tab, and it’s not currently available in ionicons 4.4.1 this outline serie, is it? It’s applying directly the outline style that’s not available.

How can I change this? Someone can help me, please?

iOS:

Android:

Regards,
MartĂ­.

1 Like
2

I have the same problem.
When i add this css code to my css file
.ion-ios-home-outline:before {
content: “\f448”;
}
the home icon will display. It looks like when the icon change to inactiv the class change from ion-ios-home to ion-ios-home-outline, but the ion-ios-home-outline class for the icon is missing

1 Like
3

Thanks @Tilovland for your response. I don’t know why ionic change, for example, from home to home-outline in IOS. In MD doesn’t change the class, only change active or not. I have tried your solution but I can’t see the icon, only shows me a square… :S

5

Thanks, it is solved my issue too, i had a problem with key, contact and camera icon.
Scss solution for these:

.ion-ios-key-outline{
&:before {
content: “\f1a7”;
}
}
.ion-ios-contact-outline{
&:before {
content: “\f41a”;
}
}
.ion-ios-camera-outline{
&:before {
content: “\f3f6”;
}
}

Maybe it helps to somebody

1 Like
6

The problem here is, that the -outline icons are removed in Version 3 of the Ionicons.

If you are not binded to the Version 3 of the Ionicons, simply downgrade to Version 3.0.0 of the Ionicons, that should fix it without any hacky workarounds.

Cheers
Unkn0wn0x

1 Like
7

I experienced exactly this issue as well. My workaround is to use the Material Design Ionicons instead of the iOS ones.

I wrote this up here:

8

This worked for me on an old ionic v3 project. Thank you so much!