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

Ionic Framework ionic-v3
12

If you want to add font awesome icons to your tabbar here is my hack to do it:
(For adding generally the font-awesome package see this topic)

your-tabs.html -> just use some unknown tabIcon strings so that the <icon> will be put in the DOM

<ion-tabs>
    <ion-tab [root]="tab1Root" tabTitle="News" tabIcon="fa-bullhorn"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="Food" tabIcon="fa-cutlery"></ion-tab>
    <ion-tab [root]="tab3Root" tabTitle="Grades" tabIcon="fa-graduation-cap"></ion-tab>
    <ion-tab [root]="tab4Root" tabTitle="Timetable" tabIcon="fa-calendar"></ion-tab>
</ion-tabs>

your-tabs.scss -> the scss rules:

// Hacks for font awesome icons in tabbar
// see https://forum.ionicframework.com/t/anyway-to-custom-the-tabbars-icon-with-my-own-svg-file/46131/2
// the content code of each fa-icon can be found here: 'node_modules/font-awesome/css/font-awesome.css'
.fa-icons-general {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}

.ion-ios-fa-bullhorn::before,
.ion-ios-fa-bullhorn-outline::before,
.ion-md-fa-bullhorn::before {
    @extend .fa-icons-general;
    content: "\f0a1";
}

.ion-ios-fa-cutlery::before,
.ion-ios-fa-cutlery-outline::before,
.ion-md-fa-cutlery::before {
    @extend .fa-icons-general;
    content: "\f0f5";
}

.ion-ios-fa-graduation-cap::before,
.ion-ios-fa-graduation-cap-outline::before,
.ion-md-fa-graduation-cap::before {
    @extend .fa-icons-general;
    content: "\f19d";
}

.ion-ios-fa-calendar::before,
.ion-ios-fa-calendar-outline::before,
.ion-md-fa-calendar::before {
    @extend .fa-icons-general;
    content: "\f073";
}
9 Likes