Angular 9 + FontAwesome 0.6: "Error NG8001: 'fa-icon' is not a known element" Angular 9 + FontAwesome 0.6: "Error NG8001: 'fa-icon' is not a known element" angular angular

Angular 9 + FontAwesome 0.6: "Error NG8001: 'fa-icon' is not a known element"


I've checked the code: there were some changes in fontawesome and now the correct import has to be next:

import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { FormsModule } from '@angular/forms';import { AppComponent } from './app.component';import { HelloComponent } from './hello.component';import { FontAwesomeModule, FaIconLibrary  } from '@fortawesome/angular-fontawesome';import { faCoffee, fas } from '@fortawesome/free-solid-svg-icons';@NgModule({  imports:      [ BrowserModule, FormsModule, FontAwesomeModule ],  declarations: [ AppComponent, HelloComponent ],  bootstrap:    [ AppComponent ]})export class AppModule {   constructor(library: FaIconLibrary) {    library.addIconPacks(fas);    library.addIcons(faCoffee);  }}

see the working example, based on your code: https://stackblitz.com/edit/angular-5qu1fy


I know this is an old question but if someone is using Angular Material I would like to add some information.As per their documentation https://github.com/FortAwesome/angular-fontawesome. Just import the fontawesome in your material module , and then use it in any components and bind property in html, like;

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';    @NgModule({  imports: [FontAwesomeModule]})export class MaterialModule {}//any componentimport { faGoogle } from '@fortawesome/free-brands-svg-icons';googleIcon = faGoogle;//html<fa-icon [icon]="googleIcon"></fa-icon>