How to change individual active-tab-icon color ? [ionic2]

Ionic Framework ionic-v3
1

Hello,

How do I change an individual active tab’s icon color?

This is my HTML

<ion-tabs selectedIndex="1">
  <ion-tab [root]="tab1Root" tabIcon="paper"></ion-tab>
  <ion-tab [root]="tab2Root" tabIcon="basket"></ion-tab>
  <ion-tab [root]="tab4Root" tabIcon="calendar"></ion-tab>
  <ion-tab [root]="tab3Root" tabIcon="person"></ion-tab>
</ion-tabs>

So how do I change the color of tabIcon="basket" to the Blue Color when it is active ?

2

In your app.scss, you could do something like this:

.tabbar {
	a.tab-button[aria-selected=true]:nth-of-type(1) {
		color: green;
		.tab-button-icon {
			color: green;
		}
	}
	a.tab-button[aria-selected=true]:nth-of-type(2) {
		color: purple;
		.tab-button-icon {
			color: purple;
		}
	}
	a.tab-button[aria-selected=true]:nth-of-type(3) {
		color: red;
		.tab-button-icon {
			color: red;
		}
	}
}

Or access colors set in your themes/variables.scss:

.tabbar {
	a.tab-button[aria-selected=true]:nth-of-type(1) {
		color: color($colors,primary);
		.tab-button-icon {
			color: color($colors,primary);
		}
	}
	a.tab-button[aria-selected=true]:nth-of-type(2) {
		color: color($colors,secondary);
		.tab-button-icon {
			color: color($colors,secondary);
		}
	}
	a.tab-button[aria-selected=true]:nth-of-type(3) {
		color: color($colors,danger);
		.tab-button-icon {
			color: color($colors,danger);
		}
	}
}
3 Likes
3

inactive
inactive.png1125×222 6.44 KB
tabbar
tabbar.png750×148 4.08 KB

How about if I have two different icons that I want to change when it’s selected and unselected?