Use custom icons with tabs in ionic2

Question

I need to use customs icons with tabs in ionic 2.

Moreover I need to change the title color and icon, if the tab is selected.

Example:

ionic Tabs

Juniper

i think its we are not able to do this atm look this github.com/driftyco/ionic/issues/7732 – Scientistic

Please check my answer, i hope that could help you :) #47153172 – Discord

Answer 1

This is the easiest way I've found, from the forums at https://forum.ionicframework.com/t/anyway-to-custom-the-tabbars-icon-with-my-own-svg-file/46131/36.

In your app.scss file, add the following code:

ion-icon {
    &[class*="custom-"] {
        // Instead of using the font-based icons
        // We're applying SVG masks
        mask-size: contain;
        mask-position: 50% 50%;
        mask-repeat: no-repeat;
        background: currentColor;
        width: 1em;
        height: 1em;
    }
    // custom icons
    &[class*="custom-icon1"] {
        mask-image: url(../assets/img/customicon1.svg);
    }
    &[class*="custom-icon2"] {
        mask-image: url(../assets/img/customicon2.svg);
    }
    &[class*="custom-icon3"] {
        mask-image: url(../assets/img/customicon3.svg);
    }
}

Then in your templates, you can use the following HTML to create the icon:

<ion-icon class="custom-icon1"></ion-icon>

In other questions, people suggest a font based method. This answer though is far less complicated to use, as long as you're not adding hundreds of icons you should be okay. The caveat is that each image is sent as a separate request, where as with the font methods all the images are contained in one file, so it would be a little more efficient.

Lafontaine

This did not work in Android. background: currentColor; cover everything – Propagate

Answer 2

3 customs icons example

scss file

.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);
        }
      }
    }

Html file

  <ion-tab [root]="tab2Root" tabIcon="categories"></ion-tab>
  <ion-tab [root]="tab1Root" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab3Root" tabIcon="hot"></ion-tab>

Source & more detail: https://forum.ionicframework.com/t/ionic2-tutorial-tabs-with-custom-active-inactive-icons/75163

Gilgai

It works when I'm running with ionic cordova run android -lc but icon not shwoing on production build. Any solution? – Albania

Answer 3

Check out the tabs component of ionic 2 here.

Refer this for using custom icons and how to display them on tabs.

Also, I think you can change the CSS properties of your title and icon through .animate class.

If not, then Inspect Element from you browser window and find a class which changes when the tab is selected. You can run your project in browser by ionic serve.

Canaigre