title: (IONIC 4) ion-tab-button do not change color when clicked/selected
body: <p>I have an <code>ion-tab</code> with differents ways to redirect: By Routes at the <code>tabs.module.ts</code> and by <code>[routerLink]</code> in html. </p>
  
  <p>The problem is: when the <code>ion-tab-buttons</code> are clicked, they navigate to other pages correctly but the color only change when using Routes and "loadchildren" routing.</p>
  
  <p>using CSS:</p>
  
  <pre><code>ion-tab-button {
   --color-selected: var(--ion-color-text-secondary);
  }
  </code></pre>
  
  <p>I tried to use <code>loadChildren</code> routing in all tabs but some tabs are to redirect to a component and was not successful. 
  I also tried to use pseudo-classes in CSS like </p>
  
  <pre><code>ion-tab-button:active {
      color: blue;
  }
  </code></pre>
  
  <p>ACTUAL FILES:</p>
  
  <p>tabs.page.html</p>
  
  <pre><code>&lt;ion-tabs&gt;
    &lt;ion-tab-bar slot="bottom"&gt;
      &lt;ion-tab-button tab="home"&gt;
        &lt;i class="fal fa-home-alt fa-2x"&gt;&lt;/i&gt;
      &lt;/ion-tab-button&gt;
  
      &lt;ion-tab-button [routerLink]="['/tabs/home/feed/feed-user/' + id]"&gt;
        &lt;i class="fal fa-user-circle fa-2x"&gt;&lt;/i&gt;
      &lt;/ion-tab-button&gt;
  
      &lt;ion-tab-button [routerLink]="['/tabs/home/trade-room']"&gt;
        &lt;i class="fal fa-comments-alt-dollar fa-2x"&gt;&lt;/i&gt;
      &lt;/ion-tab-button&gt;
    &lt;/ion-tab-bar&gt;
  &lt;/ion-tabs&gt;
  </code></pre>
  
  <p>tabs.module.ts</p>
  
  <pre><code>const routes: Routes = [
    {
      path: '',
      component: TabsPage,
      children: [
       {
          path: '',
          redirectTo: '/tabs/home',
          pathMatch: 'full'
       },
        {
          path: 'home',
          loadChildren: '../home/home.module#HomePageModule'
        },
      ]
    }
  ];
  </code></pre>
  
  <p>I need some way to change the color button when they are clicked</p>