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.

score 7 · Answer 1 · edited Nov 13 '18 at 14:59

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>

This should be marked as the answer, it was WAY more helpful than the chosen one, thanks Arindam! — DARKGuy, Jun 30 '18 at 22:01

score 1 · Accepted Answer · answered Jan 28 '18 at 08:57

1

maybe you can firstly add custom ionic icon:Add Custom Icon in Ionic 2

then use tabIcon attribute in the ion-tab:

<ion-tab [root]="chatRoot" tabTitle="Chat" tabIcon="custom-icon"></ion-tab>

answered Jan 28 '18 at 08:57

AlexLuo

458
1
4
12

score 0 · Answer 3 · answered Oct 23 '18 at 11:09

First you download your required font family. than give path in app.css like :

@font-face {
  font-family: "Flaticon";
  src: url("../assets/font/Flaticon.eot");
  src: url("../assets/font/Flaticon.eot?#iefix") format("embedded-opentype"),
       url("../assets/font/Flaticon.woff") format("woff"),
       url("../assets/font/Flaticon.ttf") format("truetype"),
       url("../assets/font/Flaticon.svg#Flaticon") format("svg");
  font-weight: normal;
  font-style: normal;
}

also add this css for every which you want in your app.css

.flaticon-stadium:before ,
.ion-ios-flaticon-stadium:before ,
.ion-ios-flaticon-stadium-outline:before ,
.ion-md-flaticon-stadium:before ,
.ion-md-flaticon-stadium-outline:before  {
  font-family: Flaticon;
  content: '\f101';
  font-size: 26px;
}

and on your html tabs code here

<ion-tabs>
  <ion-tab [root]="tab3Root" tabTitle="Facilities" tabIcon="flaticon-stadium"></ion-tab>
</ion-tabs>

tabs and tab custom icon in ionic 3

3 Answers3