1

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?

Makla
  • 9,899
  • 16
  • 72
  • 142
Vasilis Greece
  • 861
  • 1
  • 18
  • 38

1 Answers1

0

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

Sanjay
  • 838
  • 1
  • 14
  • 21
  • I don't understand. Try to read my question again. I have already import font awesome with npm the package "angular2-fontawesome". – Vasilis Greece May 05 '18 at 12:54