Change color of ion-icon with css in Ionic 4.9

@Alexander0821 wrote:

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:

--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!

Posts: 1

Participants: 1

Read full topic