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


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

This is my tabs code:

    <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 tab="tab-2">
        <ion-icon src="assets/myIcons/icon_2_tab.svg"></ion-icon>
        <ion-label>Tab 2</ion-label>

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 and here 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 :

<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-icon {

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.


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.


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