Change Icons of Tabs Active and Inactive? Ionic 2 Please help

[anon22300522]

Hello i have a Problem.
I try to set custom icons to one tab i have set.
I want that if the tab is active it should show picture1 if the tab is unactive it should show picture 2.

What i tried so far:
Here my Tab:
<ion-tab [root]="tab2Root" icon-on="categoriesON" icon-off="categoriesOFF"></ion-tab>

and here my SCSS:

      .categoriesON {
        background-repeat: no-repeat;
        background-position:center;
        background-image: url(../../assets/img/categories_active.png);
      }

  .categoriesOFF {
    background-repeat: no-repeat;
    background-position:center;
    background-image: url(../../assets/img/categories_inactive.png);
  }

Please Help.

[anon22300522]

No one an idea?
I have forgot to say that it would be nice if the icons would work on both platforms android and ios.

[jamesmacfarlane]

You need to hide the &:before element on the tab and add a background image A tag for both IOS and MD, since they use different paths in the build. You also need to add a selector for the active state.

.tabbar, .tabs-ios, .tabs-md {
    .tab-button-icon {
        background-repeat:no-repeat;
        background-position:center;
        height:23px;
        width:45px;
        &:before {
            display:none;
        }
    }
}

Use the label on the tab as the selector:

    .tabs-ios {
        a[aria-selected=false] {
            .tab-button-icon[ng-reflect-name=search], .tab-button-icon[aria-label="search outline"] {
                background-image: url(../assets/icon/tabNew1.png);
            }
        a[aria-selected=true] {
                  .tab-button-icon[ng-reflect-name=search], .tab-button-icon[aria-label=search] {
                background-image: url(../assets/icon/tabNew1-active.png);
            }
    }

.tabs-md {
    a {
        .tab-button-icon[ng-reflect-name=search], .tab-button-icon[aria-label="search"] {
            background-image: url(.././assets/icon/tabNew1.png);
        }

    a[aria-selected=true] {
            span {
                color: #f00; //whatever colour you want to use for the text
            }
            .tab-button-icon[ng-reflect-name=search], .tab-button-icon[aria-label=search] {
                background-image: url(.././assets/icon/tabNew1-active.png);
            }
    }

[anon22300522]

Ok it works now but only in Browser! It doesnt work on Android or iOS Device!
Can you know why? On devices it shows nothing but in Browser all goes fine? @jamesmacfarlane
I only had to find the ng-reflect-name=search and the aria-label=“search outline” name of every tab i had. I could find it with the firefox inspector.

So as i had the names of my tabs i changed the css like this.
Note that i added the 2 other tabs in this code by myselfe.

.tabbar, .tabs-ios, .tabs-md {
    .tab-button-icon {
        background-repeat:no-repeat;
        background-position:center;
        height:48px;
        width:48px;
        &:before {
            display:none;
        }
    }
}

.tabs-ios {
  a[aria-selected=false] {
    .tab-button-icon[ng-reflect-name=search], .tab-button-icon[aria-label="search outline"] {
      background-image: url(../../assets/img/categories_inactive.png);
      }
  }
  a[aria-selected=true] {
    .tab-button-icon[ng-reflect-name=search], .tab-button-icon[aria-label=search] {
      background-image: url(../../assets/img/categories_active.png);
      }
  }
}

.tabs-md {
  a[aria-selected=false]{
     .tab-button-icon[ng-reflect-name=contacts], .tab-button-icon[aria-label="contacts"] {
      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] {
   span {
      color: #f00; //whatever colour you want to use for the text
    }
    .tab-button-icon[ng-reflect-name=contacts], .tab-button-icon[aria-label=contacts] {
      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);
    }
  }
}

[anon22300522]

Sloved it by changing the path of the images.
So now it shows on Browser and on my Device with Ionic View.
I changed

background-image: url(../../assets/img/categories_active.png);

to

background-image: url(../assets/img/categories_active.png);

cheers

[wengjin456123]

thanks a lot,I solved my issue.

[Fransandi]

Thank you, it works perfectly!