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.

Did you check if the svg file does not have the color setted on file?

thanks @marcelomoraesaguiar i have changed the color on icon.

If you remove color property from svg file you can use this code:

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

@marcelomoraesaguiar it will change the color of icon and what i want was to change the color of icon after the tab was selected

u should change the color of the tab or activated tab in theme > vairable.scss inside :root

:root {
ion-tab-button:nth-child(1) {
    ion-icon {
      content: url('../assets/img/nav_home.png') !important;
      color: var(--ion-color-secondary) !important;
      /* --ion-color-base: var(--ion-color-secondary) !important; */
    }
  }

  ion-tab-button.tab-selected:nth-child(1) {
    ion-icon {
      content: url('../assets/img/nav_home_.png') !important;
      color: var(--ion-color-secondary) !important;
      /* --ion-color-base: var(--ion-color-secondary) !important; */
    }
  }
}

with nth-child u can handle which tab u require the number 1 is 1st tab. the above is my used code for changing my icons on selected and non selected tabs same u can do with background as well