Tabs with active/inactive icons


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-tab-bar slot="bottom">
    <ion-tab-button tab="orders">
      <fa-icon [icon]="['far', 'concierge-bell']"></fa-icon>

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

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

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.