Ionic 4 -Using a Custom Icon in a Tab

I was working on a project that needed a custom icon in the TabBar using Ionic 4 and a single custom icon. I had done this before for Ionic 3 with Fontawesome Icons. It took some trial and error, along with looking at GitHub issues, but I think I finally have it figured out. And YES! It was a LOT easier than I thought.

Environment:

• Angular 6
• @ionic/angular:  4.0.0-beta.15
• Using the Tab template

This method uses SVG’s and from what I saw during testing and GitHub tickets, it will not work with PNG files. You will need to convert your PNG to SVG first. This simple fact is what caused me the most headaches. Using the same setup with a PNG file did NOT work.

1. Save your SVG to your assets/icon folder
2. Change the ion-icon name attribute to src
3. Reference the SVG source that is relative to the page you are using it in

Initial Tab

<ion-tab-button tab="home" href="/tabs/(home:home)">
    <ion-icon name="pizza"></ion-icon>
    <ion-label>Pizza</ion-label>
</ion-tab-button>

Updated with Custom Icon

Please follow: