//tabs-icon
ion-icon {
  &[class*="custom-"] {
    margin: 0 2px 0 0;
    vertical-align: middle;
    $sz: 20px;
    width: $sz;
    height: $sz;
  }
  // custom icons
  &[class*="home-on"] {
    background: url(../assets/imgs/tabs/tab1_on.png) no-repeat 50% 50%;
    background-size: contain;
  }
  &[class*="home-off"] {
    background: url(../assets/imgs/tabs/tab1_off.png) no-repeat 50% 50%;
    background-size: contain;
  }

  &[class*="discover-on"] {
    background: url(../assets/imgs/tabs/tab2_on.png) no-repeat 50% 50%;
    background-size: contain;
  }
  &[class*="discover-off"] {
    background: url(../assets/imgs/tabs/tab2_off.png) no-repeat 50% 50%;
    background-size: contain;
  }

  &[class*="serve-on"] {
    background: url(../assets/imgs/tabs/tab3_on.png) no-repeat 50% 50%;
    background-size: contain;
  }
  &[class*="serve-off"] {
    background: url(../assets/imgs/tabs/tab3_off.png) no-repeat 50% 50%;
    background-size: contain;
  }
  &[class*="mine-on"] {
    background: url(../assets/imgs/tabs/tab4_on.png) no-repeat 50% 50%;
    background-size: contain;
  }
  &[class*="mine-off"] {
    background: url(../assets/imgs/tabs/tab4_off.png) no-repeat 50% 50%;
    background-size: contain;
  }

  &[class*="forum-off"] {
    background: url(../assets/imgs/tabs/tab5_off.png) no-repeat 50% 50%;
    background-size: contain;
  }
  &[class*="forum-on"] {
    background: url(../assets/imgs/tabs/tab5_on.png) no-repeat 50% 50%;
    background-size: contain;
  }

  &[class*="tab-key"] {
    background: url(../assets/imgs/tabs/icon-key.png) no-repeat 50% 50%;
    background-size: contain;
    height: 40px !important;
    width: 40px !important;
  }



  
}
