ionic tutorial
ionic tutorial
in ,

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

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

.tabbar {
a.tab-button[aria-selected=true]:nth-of-type(1) {
        color: rgb(232, 75, 56);
        .tab-button-icon {
            color: rgb(232, 75, 56);
        }
    }
    a.tab-button[aria-selected=true]:nth-of-type(2) {
        color: rgb(27, 182, 230);
        .tab-button-icon {
            color: rgb(27, 182, 230);
        }
    }
    a.tab-button[aria-selected=true]:nth-of-type(3) {
        color: rgb(170, 202, 69);
        .tab-button-icon {
            color: rgb(170, 202, 69);
        }
    }
    a.tab-button[aria-selected=true]:nth-of-type(4) {
        color: rgb(0,250,154);
        .tab-button-icon {
            color: rgb(0,250,154);
        }
    }
}
This will result something like this :

Author Profile

PREM KUMAR
PREM KUMAR
Hey Its..! Tech Lover , Ionic, Angular, Typescript, Dotnet Core, Node, Like Opencv, AI, ML, Robotics, Iot, Love Music, Cooking, Girls, Innovation

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

What do you think?

400 Points
Upvote Downvote

By the mekong-St.Regis Mumbai

Changi Airport,Singapore