How can i change the color of my icon when ion-tab-button is active? CSS Ionic

Question

I am using Ionic 4.12 I am working with the tab component, and i want to change the color of my ion-icon svg when i activate that tab. I'm trying to change the shadow dom of the ion-tab-button as the documentation shows with

--color-selected

--background-focused

in the css but it does not change it

tab bar code

<ion-tab-bar slot="bottom">
<ion-tab-button tab="mainview">
  <ion-icon src="assets/logo/mainView.svg"></ion-icon>
  <ion-label>INDICADORES</ion-label>
</ion-tab-button>

<ion-tab-button tab="profile">
  <ion-icon src="assets/logo/profile.svg"></ion-icon>
  <ion-label>PERFIL</ion-label>
</ion-tab-button>

<ion-tab-button tab="">
  <ion-icon src="assets/logo/phone.svg"></ion-icon>
  <ion-label>LLAMAR</ion-label>
</ion-tab-button>

<ion-tab-button tab="caregivers">
  <ion-icon src="assets/logo/doc.svg"></ion-icon>
  <ion-label>CUIDADORES</ion-label>
</ion-tab-button>

<ion-tab-button tab="help">
  <ion-icon src="assets/logo/help.svg"></ion-icon>
  <ion-label>AYUDA</ion-label>
</ion-tab-button>

current css of the icons

ion-tab-button{
font-size: 10px;
--padding-end: 0px;
--padding-start: 10px;
--padding-bottom: 0px;
--margin-left:0px;
--margin-right:0px;
max-width:100px;
ion-icon{
    font-size: 67.5px;
}

Answer 1

ion-tab-button{
font-size: 10px;
--background-focused: #a0a;
--color-selected: #a0a;
--padding-end: 0px;
--padding-start: 10px;
--padding-bottom: 0px;
--margin-left:0px;
--margin-right:0px;
max-width:100px;
ion-icon{
    font-size: 67.5px;
}}

this is the correct ionic way

Answer 2

If you want to give another color when a class is active you can simply do the following:

.class:active {
    color: blue; 
}

However in your case this would be:

ion-tab-button:active{
    color: blue;
}

The color atribute also works with hex and RGB codes (see https://www.w3schools.com/cssref/css_colors_legal.asp for more)

I also reccomend to check this post out as this is related to the problem you are having at the moment. Editing Ionic tab icon styles

Answer 3

This is the below CSS, we need to add it in component level CSS if we need to apply the styles only to the specific page.

Use of focus pseudo class, we can apply the style to the selected ion-tab-button

ion-tab-button:focus {
    ion-icon, ion-label {
        color: var(--ion-color-primary) !important;
        --ion-color-base: var(--ion-color-primary) !important;
    }
}