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

Issue

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;
}

Solution

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

Answered By - Ira Watt