title: How can i change the color of my icon when ion-tab-button is active? CSS Ionic
body: <p>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 </p>
  
  <p>--color-selected</p>
  
  <p>--background-focused </p>
  
  <p>in the css but it does not change it</p>
  
  <p>tab bar code</p>
  
  <pre><code>&lt;ion-tab-bar slot="bottom"&gt;
  &lt;ion-tab-button tab="mainview"&gt;
    &lt;ion-icon src="assets/logo/mainView.svg"&gt;&lt;/ion-icon&gt;
    &lt;ion-label&gt;INDICADORES&lt;/ion-label&gt;
  &lt;/ion-tab-button&gt;
  
  &lt;ion-tab-button tab="profile"&gt;
    &lt;ion-icon src="assets/logo/profile.svg"&gt;&lt;/ion-icon&gt;
    &lt;ion-label&gt;PERFIL&lt;/ion-label&gt;
  &lt;/ion-tab-button&gt;
  
  &lt;ion-tab-button tab=""&gt;
    &lt;ion-icon src="assets/logo/phone.svg"&gt;&lt;/ion-icon&gt;
    &lt;ion-label&gt;LLAMAR&lt;/ion-label&gt;
  &lt;/ion-tab-button&gt;
  
  &lt;ion-tab-button tab="caregivers"&gt;
    &lt;ion-icon src="assets/logo/doc.svg"&gt;&lt;/ion-icon&gt;
    &lt;ion-label&gt;CUIDADORES&lt;/ion-label&gt;
  &lt;/ion-tab-button&gt;
  
  &lt;ion-tab-button tab="help"&gt;
    &lt;ion-icon src="assets/logo/help.svg"&gt;&lt;/ion-icon&gt;
    &lt;ion-label&gt;AYUDA&lt;/ion-label&gt;
  &lt;/ion-tab-button&gt;
  </code></pre>
  
  <p></p>
  
  <p>current css of the icons</p>
  
  <pre><code>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;
  }
  </code></pre>