CODEWITHSUNDEEP
angularsoftware-designangular-fontawesome
Hao
Hao

Reputation: 6589

Import globally used library module into angular project modules

I think I did something wrong here.

I want to use angular-fontawesome module. Following the instructions to import it into AppModule successfully.

export class AppModule {
constructor(library: FaIconLibrary) {
    // Add an icon to the library for convenient access in other components
    library.addIcons(
        faUsers,
        faUserCircle,
        faDesktop,
        faTachometerAlt,
        faWrench,
        faFolder,
        faChartArea,
        faTable,
        faSearch,
        faBell,
        faFileAlt,
        faExclamationTriangle,
        faDonate,
        faEnvelope,
        faUser,
        faCogs,
        faList,
        faSignOutAlt,
        faAngleUp,
        faLaughWink,
        faServer,
        faWarehouse,
        faPlusCircle
    )
}

But when I want to use it in my own in-project module, say admin.module.ts. I have to import all that again? The same code have to be placed into admin.module.ts again?

It seems to me. AppModule is the root module. I get that if I have other modules that I want to use icons then I might have to do this. But, really? Even the AppModule is not enough?

Upvotes: 1

Views: 688

Answers (2)

Oleksii Pavlenko
Oleksii Pavlenko

Reputation: 1333

According to documentation

Icons can be registered once in app.module with FaIconLibrary.addIcons() or FaIconLibrary.addIconPacks(). Icons added to the library will be available to any other components whose parent module also imports FontAwesomeModule.

So re check next steps

1   Import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome'
2   Add FontAwesomeModule to imports
3   Inject FaIconLibrary into constructor of the module.
4   Import an icon like { faCoffee } from '@fortawesome/free-solid-svg-icons'
5   Add icon to the library with library.addIcons(faCoffee)

Upvotes: 1

Yaroslav Admin
Yaroslav Admin

Reputation: 14535

The FaIconLibrary is an application-level singleton, so you only need to add icons to the library once. However you should add FontAwesomeModule to imports of your AdminModule to make <fa-icon> component accessible to the components declared in the AdminModule (it's a standard Angular thing).

You may also find this answer interesting to read.

Upvotes: 1

Related Questions