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

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.

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