ionic tutorial

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
Tech Lover , Open Src Dev , Dotnet Core, Ionic, Xamarin, Node, Angular2, Python, Opencv, AI, ML, Robotics, SignalR, 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.