[Ionic Tutorial] Tabs with custom active/inactive Icons

Hello i tried alot so i must post this tutorial so future Projects doesnt need as much research as my project did.

Today ill show you how to create tabs like this:

image
image
image

One more thing before i start:
If you need my TabImages i have my GitHub Project for you linked on the bottom!

And one tip before i start:
If you want to use your own icons the please create images with 48x48 cause we will resize them anyway but its important for a better resolution.

Ok now lets start:
First go to your Main.html where your Activity starts or where you want to show the tabs.
In the ion content write this:

<ion-content padding>
  <ion-tabs color="androidprimary" [selectedIndex]="1">
  <ion-tab [root]="tab2Root" tabIcon="categories"></ion-tab>
  <ion-tab [root]="tab1Root" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab3Root" tabIcon="hot"></ion-tab>
</ion-tabs>
</ion-content>

If you wonder what color i use its this in my variables.scss:

$colors: (
  primary:    #387ef5,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  white:      #fff,
  subtext:      #e0e0e0,
  androidprimary:  #141414,
  androidprimarydark: #0a0a0a
);

Ok so for now we got the tabs with the names: categories, home and hot.

Well now lets modify the Main.ts file of this html file so we can change sites with clicks on the tabs.
Write something like that:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Platform } from 'ionic-angular';
import { Explore } from '../Explore/Explore';
import { Hot } from '../Hot/Hot';
import { Categories } from '../Categories/Categories';

@Component({
  selector: 'page-MainActivity',
  templateUrl: 'MainActivity.html'
})

export class MainActivity
{
  tab1Root: any = Explore;
  tab2Root: any = Hot;
  tab3Root: any = Categories;

  constructor(public navCtrl: NavController)
  {

  }
}

Notice that i have imported the sites on top of the ts file! Dont forgett it!
Change the directions to the folder and site names you have.
So now the thabs have ther specified pages so lets move on.

Now the importand step. Lets create the images for the tabs.
Import your images for the tabs in YourApp/src/assets/img/ .

Good now we need to modify the Main.scss for (to show the images in android, ios and browser).
Notice that ios stands for iOS Devices, md stands for your Browser and wp stands for your Android Devices in the scss.

.tabbar, .tabs-ios, .tabs-md , .tabs-wp{
    .tab-button-icon {
        background-repeat:no-repeat;
        background-position:center;
        height:24px;
        width:24px;
        background-size:contain;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        &:before {
            display:none;
        }
    }
}

.tabs-ios {
  a[aria-selected=false]{
     .tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label="categories"] {
      background-image: url(../assets/img/categories_inactive.png);
    }
    .tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
      background-image: url(../assets/img/explore_inactive.png);
    }
    .tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
      background-image: url(../assets/img/hot_inactive.png);
    }
  }
 a[aria-selected=true] {
   //fĂĽhr eventuellen text
   //span {
      //color: #f00; //whatever colour you want to use for the text
    //}
    .tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label=categories] {
      background-image: url(../assets/img/categories_active.png);
    }
    .tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
      background-image: url(../assets/img/explore_active.png);
    }
    .tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
      background-image: url(../assets/img/hot_active.png);
    }
  }
}

.tabs-md {
  a[aria-selected=false]{
     .tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label="categories"] {
      background-image: url(../assets/img/categories_inactive.png);
    }
    .tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
      background-image: url(../assets/img/explore_inactive.png);
    }
    .tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
      background-image: url(../assets/img/hot_inactive.png);
    }
  }

 a[aria-selected=true] {
   //fĂĽhr eventuellen text
   //span {
      //color: #f00; //whatever colour you want to use for the text
    //}
    .tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label=categories] {
      background-image: url(../assets/img/categories_active.png);
    }
    .tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
      background-image: url(../assets/img/explore_active.png);
    }
    .tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
      background-image: url(../assets/img/hot_active.png);
    }
  }
}

.tabs-wp {
  a[aria-selected=false]{
     .tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label="categories"] {
      background-image: url(../assets/img/categories_inactive.png);
    }
    .tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
      background-image: url(../assets/img/explore_inactive.png);
    }
    .tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
      background-image: url(../assets/img/hot_inactive.png);
    }
  }

 a[aria-selected=true] {
   //fĂĽhr eventuellen text
   //span {
      //color: #f00; //whatever colour you want to use for the text
    //}
    .tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label=categories] {
      background-image: url(../assets/img/categories_active.png);
    }
    .tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
      background-image: url(../assets/img/explore_active.png);
    }
    .tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
      background-image: url(../assets/img/hot_active.png);
    }
  }
}

Hell yeah now you have the exactly same tabs as i have.

Solution if your images only shows on Browser but not on Device:
Many people face that problem and im 99% of them its because the path of the images is wrong.
If you have your images in src/assets/img/ then this is the right path:
background-image: url(../assets/img/hot_active.png);
If not try to change it until you see your images on your device.

GitHub Project where you can find the Images and the Main files:
https://github.com/lukasrein97/Ionic2TabsWithCustomIcons

Cheers!

8 Likes

Hi Lukas,

Thanks for the tutorial, worked like a charm. Just one thing you must add the “outline” in the .tab-button-icon[aria-label=“categories outline”] in iOS when a[aria-selected=false] otherwise is not going to show in the iOS device.

Best,
Alex.

2 Likes

Ah ok ill add this to my code. Did you test it on native iOS or with ionic View? Because on iOS i only tested it with Ionic View.

Im glad that it worked like a charm for you :slight_smile:

Yes I did !

On Android worked perfect and iOS just add “outline” for all the icons are not active.

Best,
Alex

2 Likes

Ok perfect thanks for the info!

1 Like

Sure:

This is the iOS snippet:

.tabs-ios {
a[aria-selected=false]{
.tab-button-icon[ng-reflect-name=inicio], .tab-button-icon[aria-label=“home outline”] {
background-image: url(…/assets/tabIcons/home-off.svg);
}
.tab-button-icon[ng-reflect-name=explorar], .tab-button-icon[aria-label=“explore outline”] {
background-image: url(…/assets/tabIcons/explore-off.svg);
}
.tab-button-icon[ng-reflect-name=news], .tab-button-icon[aria-label=“news outline”] {
background-image: url(…/assets/tabIcons/news-off.svg);
}
.tab-button-icon[ng-reflect-name=user], .tab-button-icon[aria-label=“user outline”] {
background-image: url(…/assets/tabIcons/users-off.svg);
}
}
a[aria-selected=true] {
.tab-button-icon[ng-reflect-name=inicio], .tab-button-icon[aria-label=“home”] {
background-image: url(…/assets/tabIcons/home-on.svg);
}
.tab-button-icon[ng-reflect-name=explorar], .tab-button-icon[aria-label=explorar] {
background-image: url(…/assets/tabIcons/explore-on.svg);
}
.tab-button-icon[ng-reflect-name=news], .tab-button-icon[aria-label=news] {
background-image: url(…/assets/tabIcons/news-on.svg);
}
.tab-button-icon[ng-reflect-name=user], .tab-button-icon[aria-label=user] {
background-image: url(…/assets/tabIcons/users-on.svg);
}
}
}

3 Likes

Thank you very much i tested it also native on iOS now and with Outline it works perfect.

Well i marked it as solution because i cant edit my tutorial anymore so people witch facing the same problem have the right solution below my tutorial to show inactive icons on iOS!

Thank you for facing and sloving the problem! :slight_smile:

good call on the path only going up 1 folder instead of 2! I spent forever trying to figure that out. cheers

1 Like

If the Github link doesnt work anymore please look at this link: https://github.com/lukay97/Ionic2TabsWithCustomIcons

on android it appears the icon but transparent I don’t know why ?

Really awesome works like charm… THAAAAAAAAAAAAAAAAAAAAAAAAAAAANKSSSSSSSSSSSSSSSSS

1 Like

It doesn’t work anymore - can you share it again?

@maxpaj what doesnt work anymore? please be more specific.

WOW yes, I can see how confusing that was, sorry!

I meant the Github repo link. It gives me a 404.

https://github.com/lukay97/Ionic2TabsWithCustomIcons

The link seems broken, is there a new source for this? Thanks.

See: Theming your Ionic 3 App - Bespoke SVG icons

It resolved my problem, you saved my day. Thanks!!!