<fa-icon> is showing error. Works only in app.component.html and no other component

[Whizfactor]

Describe the problem

'fa-icon' is not a known element:

1. If 'fa-icon' is an Angular component, then verify that it is part of this module.
2. If 'fa-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.ngtsc(-998001) (element) fa-icon: HTMLElement

the tag is showing error in other components except app.component.html

What did you expect?

I ecpected this to work in all my components since i used private library: FaIconLibrary in app.module.ts.

Reproducible test case

[Whizfactor]

I am using Angular 12. Do i still have to import fortawesome to any components i want to use the icons?

[Whizfactor]

TRIED different things but none worked.

[Whizfactor]

import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome'; import { faFacebookF, faTwitter, faInstagram, faWhatsapp } from '@fortawesome/free-brands-svg-icons'; import { faPhone as fasPhone, faAddressCard as fasAddressCard, faLocationArrow as fasLocationArrow, faArrowCircleLeft as fasArrowCircleLeft } from "@fortawesome/free-solid-svg-icons";

export class AppModule { constructor(private library: FaIconLibrary) { library.addIcons(faFacebookF, faTwitter, faInstagram, faWhatsapp, fasPhone, fasAddressCard, fasLocationArrow, fasArrowCircleLeft); } }

[Whizfactor]

i followed all the instructions even tho many of the examples and insructions were limited and not expansive enough.

[devoto13]

You need to add FontAwesomeModule to the imports of every module where you want to use fa-icon component, because of Angular module encapsulation. You can read more about it in this blog post.

https://github.com/FortAwesome/angular-fontawesome/pull/311 should hopefully make documentation more clear about this.

[ghost]

I am having the same issue, and I have created a sample app to demonstrate.

The app imports FontAwesomeModule in AppModule and TestModule. When I try to build, I am getting the error NG8002: Can't bind to 'icon' since it isn't a known property of 'fa-icon'.

However, if you comment out the fa-icon in TestComponent, you will see the fa-icon that is present in the HomeComponent (using the AppModule import of FontAwesomeModule.)

I've attached the project in a zip. To run it, just install dependencies (npm i) and then ng serve -o.

I'll keep looking into it because I'm sure it is something I'm missing, but thought I would drop this here in case others have the same issue.

TestFontAwesome-main.zip

[devoto13]

@smmoses Thanks for the reproduction. The error message produced by Angular is actually misleading in your case - see https://github.com/angular/angular/issues/17446 for the bug report.

The problem with your application is that you attempt to render TestComponent as part of the AppModule (although indirectly, through the use of the router), but AppModule actually has no idea about TestComponent as it is defined in another module. To fix your example, you need to add TestModule to the imports in the AppModule.

[ghost]

@devoto13 Thank you so much! This resolved my issue.

[weirdyang]

I have this error in my editor; but it compiles.

any idea what may be causing this?

[devoto13]

@weirdyang Make sure that you've added FontAwesomeModule to the imports of the module where your component is declared as pointed out in step 2 of the documentation and in https://github.com/FortAwesome/angular-fontawesome/issues/312#issuecomment-884169210. If it still does not work, you may be hitting an Angular bug, like e.g. https://github.com/FortAwesome/angular-fontawesome/issues/312#issuecomment-884791371. If it still does not work, please provide a minimal reproduction of the problem, so we can take a look.

It could also be some caching error in the Angular language server in case ng build does not report the same error, then restarting the editor may help.