Ionic Quick Tip: Change Color of Active Tab Icon

posted in: Uncategorized | 0

Here’s a quick Ionic tip from a question on the Ionic forum. The original question was:

I am trying to change the color of the active state on the tab icons. I want to keep my ion-tabs background grey and the icons themselves as the default black, but an active tab I want a different color.

The answer is pretty simple. Ionic has a CSS rule that changes the opacity.

.tab-item.tab-item-active, .tab-item.active, .tab-item.activated {
    opacity: 1;
}

All you need to do is override that rule with whatever rules you prefer.

.tab-item.tab-item-active, .tab-item.active, .tab-item.activated {
    color: red;
}

More Reading

Original Forum Post

My name is Andrew McGivery. I currently work full time as an application developer at Manulife Financial in Canada. My current passion is building and leading highly engaged teams where employee happiness, learning, and growth is a priority.

Leave a Reply