I'm currently working on a large Angular application that utilizes lazy loading modules. Throughout various components in different modules, I make use of icons from Font Awesome individually. Here is an example:
In component.ts:
import { faChevronDown, faChevronUp, faTimes } from '@fortawesome/free-solid-svg-icons';public faChevronDown = faChevronDown;public faChevronDown = faChevronUp;In component.html:
<fa-icon class="fa-md" [icon]="faChevronDown"></fa-icon>As the number of icons in my application grows, with some being repeated in different components, I have been exploring ways to streamline this process. Is there a way to centralize the declaration of icons and call them directly in HTML when needed?
Referencing an article on the Angular Wiki, I discovered the library.add() method which seemed like it could be a perfect solution for this issue. Thus, I attempted to implement it:
In app.module:
import { faChevronDown, faChevronUp} from '@fortawesome/free-solid-svg-icons';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FontAwesomeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
constructor() {
library.add(faChevronDown, faChevronUp);
}
}
And in my component.html:
<fa-icon class="fa-md" icon="faChevronDown"></fa-icon>However, despite these efforts, I encountered errors: the icons were not displaying on the screen where they should be, and the console showed the following error:
FontAwesome: Property icon is required for fa-icon/fa-duotone-icon components. This warning will become a hard error in 0.6.0.
Therefore, I need to resolve this issue or explore alternative solutions to centralize icon usage in my application.