How to change the icon dynamically?

Question

I'm building an app using Ionic Angular, Font Awesome and Stripe. I want to change the icon on the HTML page based on the value I get from the server in the .ts page.

This is what I have:

<ion-item *ngFor="let transaction of myRecentTransactions">
    <fa-icon [icon]="['fab', 'cc-visa']"></fa-icon><span>{{ transaction.source.last4 }}</span>
</ion-item>

and this is what I want, but for some reason, it doesn't work:

<ion-item *ngFor="let transaction of myRecentTransactions">
    <fa-icon [icon]="['fab', '{{ transaction.source.brand }}']"></fa-icon><span>{{ transaction.source.last4 }}</span>
</ion-item>

What am I doing wrong?

Answer 1

In property binding, use transaction.source.brand directly, no need of using interpolation.

Try like this:

 <fa-icon [icon]="['fab',  'cc-' + transaction.source.brand ]"></fa-icon>