Change custom icon color

Ionic Framework ionic-v3
1

I have added custom icons for my tab menu, but I want to change the color of the icon tab links when active, inactive etc. How do I modify the colors for the tab icons?

I have used the code below in my app.scss file.

ion-icon {
    &[class*="appname-"] {
        // Instead of using the font-based icons
        // We're applying SVG masks
        mask-size: contain;
        mask-position: 50% 50%;
        mask-repeat: no-repeat;
        background: currentColor;
        width: 1.5em;
        height: 1.5em;
       
    }
    // custom icons
    &[class*="appname-trx"] {
        mask-image: url(../assets/img/trx.svg);
    }
    &[class*="appname-ex"] {
        mask-image: url(../assets/img/boots.svg);
    }
    &[class*="appname-ld"] {
        mask-image: url(../assets/img/trophy.svg);
    } 
    &[class*="appname-sc"] {
        mask-image: url(../assets/img/afl.svg);
    }  
    &[class*="appname-cx"] {
        mask-image: url(../assets/img/pork.svg);
    }}
2

Check out the tabs doc

At the bottom you can change the icon colors using the SASS variables:

For example IOS:

$tabs-ios-tab-icon-color
$tabs-ios-tab-icon-color-active
3

That doesnt show how to customize the tabs. I have the latest version and can not find the variables you state above in both app.scss and also /theme/variables.scss

4

You just add those variables into /theme/variables.scss to overwrite default variables. You don’t need to find the actually variable to change the colors.

5

Doesnt work. I also tried adding [color]=“isAndroid ? ‘secondary’ : ‘primary’” to < ion-tabs > and it works but I dont know where its getting its color from, if I change primary color in variables.scss doesnt work

<ion-tabs [selectedIndex]=“mySelectedIndex” [color]=“isAndroid ? ‘secondary’ : ‘primary’” >
<ion-tab [root]=“tab1Root” tabIcon=“appname-rx” >
<ion-tab [root]=“tab2Root” tabIcon=“appname-rx2”>
<ion-tab [root]=“tab3Root” tabIcon=“appname-rx3”>
<ion-tab [root]=“tab4Root” tabIcon=“appname-rx4”>

6

In my code above I have currentColor as the variable for background of my custom icons, where do I modify this, it seems that this is the variable that needs to be updated. When I change it to a hash color, #333 it changes the icon colors but then there is no active color present… so its only dynamic based on the currentColor variable

7

All you have to do is add these variables right after Shared Variables

// Shared Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass variables found in Ionic's source scss files.
// To view all the possible Ionic variables, see:
// http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/
$tabs-ios-tab-icon-color: #333;
$tabs-ios-tab-icon-color-active: #cc3f44;

You can read this doc if you are still confused

8

I have already tried that, it doesnt work with custom SVG icons as I have included in my code above.

9

have you found the solution ?