CODEWITHSUNDEEP
cssangularsassionic2
Shiv Gaurav
Shiv Gaurav

Reputation: 448

Customize icon tabs Ionic 3

I am trying to apply customize icons for ionic tabs but it's showing only inactive tab icon, on clicking another tab it's not showing anything

tabs.scss file

.tabs{
  a[aria-selected=false]{
    .ion-md-tab1 {
      max-width: 26px !important;
      content: url("../assets/imgs/inactive-tab1.png") !important; }
    }
.ion-md-tab2 {
          max-width: 26px !important;
          content: url("../assets/imgs/inactive-tab2.png") !important; 
     }
        }
  a[aria-selected=true]{
    .tabs-md-tab1 {
      max-width: 26px !important;
      content: url("../assets/imgs/active-tab1.png") !important;
    }
     .ion-md-tab2 {
      max-width: 26px !important;
      content: url("../assets/imgs/inactive-tab2.png") !important; 
     }
  }
}

tabs.html

<ion-tabs>
  <ion-tab [root]="tab1Root" tabIcon="tab1"></ion-tab>
  <ion-tab [root]="tab2Root" tabIcon="tab2"></ion-tab>
</ion-tabs>

Upvotes: 2

Views: 1330

Answers (3)

Mab Kiani
Mab Kiani

Reputation: 584

If you need to use custom icon in your app, here is a solution that worked great for me.

  1. Put your .svg icon file(s) in:

    /src/assets/icons/...

  2. In your app.scss file, add this scss code:

    ion-icon {
    &[class*="prefix-"] {
        mask-size: contain;
        mask-position: 50% 50%;
        mask-repeat: no-repeat;
        background: currentColor;
        width: 1em;
        height: 1em;
    }
// custom icons
    &[class*="prefix-categories"] {
        mask-image: url(../assets/icon/ic_categories.svg);
    }
    &[class*="prefix-menu"] {
        mask-image: url(../assets/icon/ic_menu.svg);
    }
}

  3. and on your html tabs code here

    <ion-tabs>
    <ion-tab [root]="tab1Root" tabTitle="Title" tabIcon="prefix-name"></ion-tab>
</ion-tabs>

Upvotes: 1

sushma
sushma

Reputation: 1

ng-reflect-is-active="true" is not working in the production build use this; it works fine for me:

.tabs {
    a[aria-selected=true] {
      .ion-md-tab1 {
        max-width: 26px !important;
        background: url("../assets/imgs/svg/ic_home_active.svg") no-repeat 50% 50%;
      }
    }
  }

Upvotes: 0

Shiv Gaurav
Shiv Gaurav

Reputation: 448

.tabs{
    .ion-md-tab1[ng-reflect-is-active="true"] {
      max-width: 26px !important;
      content: url("../assets/imgs/inactive-tab1.png") !important; }
    .ion-md-tab2[ng-reflect-is-active="true"] {
          max-width: 26px !important;
          content: url("../assets/imgs/inactive-tab2.png") !important;}
    .tabs-md-tab1[ng-reflect-is-active="false"] {
      max-width: 26px !important;
      content: url("../assets/imgs/active-tab1.png") !important;
    }
     .ion-md-tab2[ng-reflect-is-active="false"] {
      max-width: 26px !important;
      content: url("../assets/imgs/inactive-tab2.png") !important; 
     }
}

Upvotes: 1

Related Questions