Adding Font Awesome 5 icon from Angular 5 componen

Question

I am using Font Awesome 5 (angular2-fontawesome - package) with Angular 5.

What I am trying to do is to import fa icon from component.

Html:

<mat-list>
     <mat-list-item><a [routerLink]="['/']" fragment="intro-text" [innerHTML]="introText"> {{introText}} </a></mat-list-item>
     ...
</mat-list>

Component:

introText = "Welcome";

@HostListener("window:resize", ["$event"])
onResize(event) {      
  this.introText = window.innerWidth < 1080 ? '<i fa class="fas fa-home"></i> <h1>1</h1>' : "Welcome";
}   

When I am above from 1080 pixels it shows me "Welcome" and when is below it shows me the number 1 bold and big.

The problem is that icon it didn't show up. I checked to put...

<i fa class="fas fa-home">

in Html and it works but from component it didn't. Why and what can I do to fix this?

Answer 1

Bootstrap 4 has removed Font Awesome import , you need to explicitly import Font Awesome .