Ion-icon color does not change when ion-tab-button is selected

i am using custom svg icon for ion-icon :-1

and the ion-tab code is:

<ion-tab-bar slot="bottom">

  <ion-tab-button tab="explore">

  <ion-icon src="../../assets/no upcoming ride/icon-explore@3x.svg"></ion-icon>

    <ion-label>Explore</ion-label>

  </ion-tab-button>

  <ion-tab-button tab="suggested">

    <ion-icon src="../../assets/no upcoming ride/icon-suggested@3x.svg"></ion-icon>

    <ion-label>Suggested</ion-label>

  </ion-tab-button>

  <ion-tab-button tab="upcoming">

    <ion-icon src="../../assets/no upcoming ride/icon-upcoming@3x.svg"></ion-icon>

    <ion-label>Upcoming</ion-label>

  </ion-tab-button>

</ion-tab-bar>

i have tried it by changing like this:
ion-tab-button:focus {

ion-icon, ion-label {

    color: var(--ion-color-primary) !important;

    --ion-color-base: var(--ion-color-primary) !important;

}

}

but nothing worked.

it changed only the label color but the icon color remain the same.

1 post - 1 participant

Read full topic