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

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.

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.

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);
            }
    }
2 Likes

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

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

thanks a lot,I solved my issue.

2 Likes

Thank you, it works perfectly!

1 Like

A post was split to a new topic: –prod --release hides tab icons