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

Ionic Framework
1

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!

2

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

3

Sadly I haven’t :frowning:

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

Cheers!

4

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.

2 Likes
5

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