Tabs with active/inactive icons

Ionic Framework Ionic Angular
1

Hello.

I’m new to Angular and Ionic framework.

I hope you can help me changing the icons for active and inactive states. I’ve read some tutorials but they are quite old.

This is what I have:


<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="orders">
      <fa-icon [icon]="['far', 'concierge-bell']"></fa-icon>
      <ion-label>Orders</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="products">
      <fa-icon [icon]="['far', 'box-full']"></fa-icon>
      <ion-label>Products</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="notifications">
      <fa-icon [icon]="['far', 'bells']" *ngIf="selected"></fa-icon>
      <fa-icon [icon]="['fas, 'bells']" *ngIf="!selected"></fa-icon>
      <ion-label>Notifications</ion-label>
    </ion-tab-button>
</ion-tabs>

I basically want to know the right condition for the if statement. Or is it more complex than that?

I’m using Ionic v5

Thank you.