Change color of ion-icon in tabs menu with css in Ionic 4.9

Greetings.

I’m trying to change the color of the custom icons I’m displaying in my tabs menu.

This is my tabs code:

<ion-tabs>
    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="tab-1">
        <ion-icon src="assets/myIcons/icon_1_tab.svg"></ion-icon>
        <ion-label>Tab 1</ion-label>
      </ion-tab-button>
      <ion-tab-button tab="tab-2">
        <ion-icon src="assets/myIcons/icon_2_tab.svg"></ion-icon>
        <ion-label>Tab 2</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
</ion-tabs>

I tried using the custom css properties to change the styling with the properties:

ion-tab-button {
--color-selected: #somecolor;
--color: #somecolor;
}

(as explained here https://ionicframework.com/docs/api/tab-button and here https://stackoverflow.com/questions/55563619/how-can-i-change-the-color-of-my-icon-when-ion-tab-button-is-active-css-ionic) to no avail.
I must say that the tab background and label colors are correctly updated by those css properties. However, the tab icon remains the same color.

Also, I tried the approach from https://golb.hplar.ch/2018/01/Custom-SVG-icons-in-Ionic.html :

[...]
<ion-tab-button tab="tab-1">
        <ion-icon src="assets/myIcons/icon_1_tab.svg" class="someclass"></ion-icon>
        <ion-label>Tab 1</ion-label>
</ion-tab-button>
[...]
ion-icon {
    &.someclass{
      color:blue;
}

That also didn’t work. Does anyone knows how to do it correctly?

This is my ionic info:

Ionic CLI : 5.2.7
Ionic Framework : @ionic/angular 4.9.0
@angular-devkit/build-angular : 0.801.3
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.1.3
@ionic/angular-toolkit : 2.0.0

Thanks in advance!

did you managed to solve this? I’m having the same issue

Sadly I haven’t :frowning:

I’m still waiting to see if someone knows the answer.

Cheers!

Ok, this is how we solved it.
(I’m not sure it is the best option, definitely I liked better how it worked in Ionic 3 without doing this.)

I noticed there was a fill property inside the svg images I am using, (in my case it was set to “fill: #(hex code for some blackish color)” ) and that was impossible to overwrite with css styling. So I went through all my svg files I used for the Tabs and deleted manually this fill styling.

After that, the normal

ion-tab-button {
// Icon and text
–color: grey;
–color-selected: blue;
// Background
–background: white;
–background-focused: white;
–ripple-color: white;
}

is working for both the text and the icon.

1 Like

It’s working for me as well! Thanks :smiley: