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

Question

I'm facing a problem trying to use fontawesome icons. I'd already installed FontAwesome with command line into my project:

ng add @fortawesome/angular-fontawesome@latest

I have a submodule and I want to use "fas"->"images" icon just inside it. So, I'd created my submodule:

import { PhotoListComponent } from './photo-list.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';

@NgModule({
  declarations: [
    PhotoListComponent
  ],
  imports: [
    CommonModule,
    FontAwesomeModule
  ]
})
export class PhotoListModule {
  constructor() {
    library.add(fas);
  }
}

I have a component in this submodule (photo-list.component.ts and photo-list.component.html). In its HTML file I just put this line to show icon in my title:

<h1><fa-icon [icon]="['fas','images']"></fa-icon> Images</h1>

When I run my angular project and open this module, the following error occurs (and icon does note display): Error NG8001: 'fa-icon' is not a known element

Why doesn't it work?

Answer 1

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

Answer 2

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 component
import { faGoogle } from '@fortawesome/free-brands-svg-icons';

googleIcon = faGoogle;

//html
<fa-icon [icon]="googleIcon"></fa-icon>

Answer 3

After upgrading to Angular 13 this started happening and nothing above worked. What worked for me was going into the Angular Language Service extension settings and check off the Angular: View Engine option