tabs and tab custom icon in ionic 3

Question

i am building an ionic application in which i am using ionic tabs at the bottom for navigation for the whole application.. i want to add custom svg as tabs icon. i don't know how can i do this but if there is any solution kindly provide the link or code or any reference of the document.

hi there!! i am building an ionic application in which i am using ionic tabs at the bottom for navigation for the whole application.. i want to add custom svg as tabs icon. i don't know how can i do this but if there is any solution kindly provide the link or code or any reference of the document.

and i also want to add avatar in ionic tabs.

Answer 1

It's so simple and easy. You just have you use this CSS/SCSS for your custom icon.

ion-icon {
&[class*="custom-"] {
    margin: 0 5px 0 0;
    vertical-align: middle;
    $sz: 20px;
    width: $sz;
    height: $sz;
} // custom icons
&[class*="pin"][ng-reflect-is-active="true"] {
    background: url("../assets/imgs/custom-icons/pin_on.png") no-repeat 50% 50%;
    background-size: contain;
}//in case of active
&[class*="pin"][ng-reflect-is-active="false"] {
    background: url("../assets/imgs/custom-icons/pin_off.png") no-repeat 50% 50%;
    background-size: contain;
}//in case of inactive
&[class*="stars"] {
    background: url("../assets/imgs/custom-icons/stars.png") no-repeat 50% 50%;
    background-size: contain;
}

}

and this will be your HTML content. I have given here two examples, one for one for normal

<ion-tab [root]="home" tabTitle="Home" tabIcon="custom-pin"></ion-tab>

// another example

<ion-icon name="custom-stars" color="primary"></ion-icon>