CODEWITHSUNDEEP
angularfont-awesome
Carlos Diego Quirino Lima
Carlos Diego Quirino Lima

Reputation: 165

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

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?

Upvotes: 15

Views: 20462

Answers (4)

David J
David J

Reputation: 1098

I had this problem and the answers here didn't help. Remember if you're using fortawesome in a module, make sure to import it there in addition to app-module.

Upvotes: 4

parliament
parliament

Reputation: 22904

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

enter image description here

Upvotes: -1

Dildar Khan
Dildar Khan

Reputation: 121

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>

Upvotes: 3

Danil Sabirov
Danil Sabirov

Reputation: 353

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

Upvotes: 16

Related Questions