Anyway to custom the tabbar's icon with my own svg file?

Ionic Framework ionic-v3
4

It’s pretty easy to do actually. When you set a tabIcon property, Ionic sets a class name on the tab, based on the name you provided. So for example, if you set tabIcon="customicon", then the resulting class names will be .ion-ios-hygglo-customicon and .ion-ios-hygglo-customicon-outline (for selected tabs) for iOS. On Android, the prefix will be .ion-md- instead of .ion-ios-.

Then just create a custom css, something like this:

.ion-ios-customicon,
.ion-md-customicon {
  content: url(../../assets/img/ui/customicon.svg);
  width: 24px;
  height: 32px;
  padding: 6px 4px 2px;
  opacity: 0.9;
}

And voilá! :slight_smile:

Edit: This goes for basically where ever you can use ion-icons, so you can customize whatever icon you want.

19 Likes