Ionic-framework: Tabs title and icons

Created on 13 Jul 2016 · 4Comments · Source: ionic-team/ionic-framework

Hello,
This issues is more a feature request.

I thinks Tabs implementation should be different.
Actually, to create a tabs we have to write:

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Tab1" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Tab2" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Tab3" tabIcon="contacts"></ion-tab>
</ion-tabs>

But we want to set our personal icons using font-awesome.
Actually, we have to overwrite css style for ionic icon, to replace with the font-awesome icon picture.
So I thinks it should be easier to change the content and we should be able to define text or icons or badges or other element as html in value of ion-tab and not in argument of ion-tab.
So somethink like this:

<ion-tabs>
  <ion-tab [root]="tab1Root">Text I want</ion-tab>
  <ion-tab [root]="tab1Root">
        <span class="fa fa-icon fa-2x"></span>
        <ion-badge item-right>2</ion-badge>
  </ion-tab>
  <ion-tab [root]="tab1Root">
        <ion-icon name="heart"></ion-icon>
  </ion-tab>
</ion-tabs>

It look some other poeple have the same problem actually:
https://forum.ionicframework.com/t/anyway-to-custom-the-tabbars-icon-with-my-own-svg-file/46131/4

Source

movrack

Most helpful comment

My solutions for materialdesignicons looks like:

create some scss file:

@import '../../node_modules/mdi/scss/materialdesignicons';

$mdi-ion-md-css-prefix: "ion-md-mdi";
$mdi-ion-ios-css-prefix: "ion-ios-mdi";

.ion-mdi:before {
  font-family: "Material Design Icons";
}

@each $key, $value in $mdi-icons {
    .#{$mdi-ion-md-css-prefix}-#{$key}:before,
    .#{$mdi-ion-ios-css-prefix}-#{$key}:before {
        @extend .ion-mdi:before;
        content: char($value);
    }
}
.#{$mdi-ion-md-css-prefix}-blank:before,
.#{$mdi-ion-ios-css-prefix}-blank:before {
    @extend .ion-mdi:before;
    content: "\F68C";
    visibility: hidden;
}

Use it in your template:

<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="mdi-home"></ion-tab>

frankkoenigstein on 18 Jan 2017

👍2 🎉1

All 4 comments

ionic2 uses a responsive way for showing icons, the value of attribute tabIcon will become to a css class, eg: if tabIcon="home" and platform is ios , the css class name is ion-ios-home , and ion-md-home for platform android and so on.

I think the way to solve your problem is to fit the fontawsome icon to the ionic way.
As far as I know, a fontawsone icon uses a css file too, so just create two or more css classes for ionic to use (just like ion-ios-icon1 ion-md-icon1 blablabla), and then you can just use tabIcon="icon1"

Emeryao on 18 Jul 2016

Hello! Thanks for opening an issue with us! As this seems like more of a support question i will urge that you ask this question on our forum (forum.ionicframework.com). Thanks for using Ionic!

jgw96 on 19 Jul 2016

My solutions for materialdesignicons looks like:

create some scss file:

@import '../../node_modules/mdi/scss/materialdesignicons';

$mdi-ion-md-css-prefix: "ion-md-mdi";
$mdi-ion-ios-css-prefix: "ion-ios-mdi";

.ion-mdi:before {
  font-family: "Material Design Icons";
}

@each $key, $value in $mdi-icons {
    .#{$mdi-ion-md-css-prefix}-#{$key}:before,
    .#{$mdi-ion-ios-css-prefix}-#{$key}:before {
        @extend .ion-mdi:before;
        content: char($value);
    }
}
.#{$mdi-ion-md-css-prefix}-blank:before,
.#{$mdi-ion-ios-css-prefix}-blank:before {
    @extend .ion-mdi:before;
    content: "\F68C";
    visibility: hidden;
}

Use it in your template:

<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="mdi-home"></ion-tab>

frankkoenigstein on 18 Jan 2017

👍2 🎉1

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.