Change icon in FontAwesome and Angular 10

Question

I got FontAwasome pro configured and working in my Angular 10 projet.

<div class="update-split" [class]="testClass"><fa-icon [icon]="['fad', 'sync-alt']"></fa-icon></div>

This line work, and display the correct icon But If I try to bind the icon like this:

<div class="update-split" [class]="testClass"><fa-icon [icon]="testIcon"></fa-icon></div>

Then do this in my ts file

this.testIcon = "['fad', 'sync-alt']";

I got: ERROR Error: Could not find icon with iconName=['fad', 'sync-alt'] and prefix=fas in the icon library.

So, he try to found a icon named ['fad', 'sync-alt'] in the normal fas library. Maybe is only a string with ' " error? Thanks

Answer 1

try replacing this.testIcon = "['fad', 'sync-alt']"; in your ts to this.testIcon = ['fad', 'sync-alt']; (without the double quotes). You want to bind to an object, not to a string

Answer 2

it can be done by using the whole font awesome tag and class in a typescript variable such as:

public font_awesome:HTMLElement;
this.font_awesome  = '<i class="fas fa-adjust"></i>'

Then in your .html file you can bind the value as follow:

<span [innerHTML]="font_awesome"></span>

I know its not the same path as that you want to used, but hope it will help.