Use iOS icons without outline in tab bar

Ionic Framework ionic-v3
1

I defined a tab bar inside my app:

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Start" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Book" tabIcon="book"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Calc" tabIcon="calculator"></ion-tab>
</ion-tabs>

For iOS it seems like the iOS-outline icons ( http://ionicframework.com/docs/v2/ionicons/ ) are used by default. But instead I want to use the normal iOS Icons without outline. I can’t use tabIcon=“ios-home” because on android I still want to use the md version of the icon.

How to achieve this?

2

Bump as I am searching for solution on this as well. It seems like I was able to find the js doing this in main.js, is there a way to override it? It’s actually irritating to have some icons outlines while others are not.

1 Like
3

I know it been a while since then, but I got the same issue I find a simple css trics to overcome the issue. You have to overwrite the css icon code of the outline icon. For example ios-heart used as tabIcon
Html:
<ion-tab [root]=“tab1Root” tabTitle=“MEEV” tabIcon=“ios-heart”>
Css
ion-ios-heart-outline:before {
content: “\f443”;
}
Here i’m owerwritting the code of ios-heart-outline icon to use the plain one.