Using fa icon in standalone component

Question

Using fa icon in standalone component

tgt87 opened this issue 2 years ago · 6 comments

Describe the problem

Hi, I'm trying to build an app using only standalone components as such I'm not having a app.module.ts file.
Instead I tried importing FontAwesomeModule into main.ts instead.

I am also import the icon that I want to use in the component itself

However I'm getting the following error

Angular version: 14.2.0
"@fortawesome/angular-fontawesome": "^0.11.1",
"@fortawesome/fontawesome-svg-core": "^6.3.0",
"@fortawesome/free-regular-svg-icons": "^6.3.0",
"@fortawesome/free-solid-svg-icons": "^6.3.0",

Appreciate any advice on how I should do the import and use the icon correctly in a standalone component.

Answer 1 · 2023-02-26T08:35:33.000Z

You would need to add FontAwesomeModule to the BlockSummaryComponent's imports to make the components available to it.

Answer 2 · 2023-02-26T13:49:51.000Z

Thanks @devoto13. Is there a way to add it globally so that I don't need to add the import to every component that is using it?

Answer 3 · 2023-02-26T15:06:18.000Z

As far as I'm aware, there is no way to declare global components in Angular. A common pattern is to define a SharedModule which re-exports all commonly used components and modules. This way one only needs to import this shared module instead of all its contents separately.

Answer 4 · 2023-02-26T18:09:43.000Z

Thanks @devoto13. Is there a way to add it globally so that I don't need to add the import to every component that is using it?

That's completely against the idea of standalone components. If you don't want to import it into every component you should not use standalone but create a module where you declare your components and then import the dependencies for all the declared components.