How to import icons to be available as css classes

[MikeDabrowski]

In my project I use UI libs that allow icon customization by providing string with icon css class definition. For example 'fa fa-user'. Such string will end up in class of the span or i tag in html. How to import and register icons to global space to be available from html as class?

So far I found workaround:
In module:

import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';

library.add(fas);

In component

import { faCogs } from '@fortawesome/free-solid-svg-icons';
import fontawesome, { IconDefinition, IconPack} from '@fortawesome/fontawesome';

fontawesome.library.add(<IconDefinition|IconPack> faCogs);

I needed to use @fortawesome/fontawesome because somehow its library.add works as I want it. Also conflicting types must be casted to avoid TS compalints.

Is there a better way to do it ?

[devoto13]

It's rather hard to answer your question 😄 The better way is to not do, what you're doing.

Basically you are loading two instances of FontAwesome library: one is used by <fa-icon> component (this library) and another one uses MutationObserver to replace <i> tags with classes.

Mixing both ways in the same application is neither supported nor recommended. I would recommend to either stick with only fontawesome-free/pro (which is a new name of fontawesome) package (this does not support any tree shaking though) or only <fa-icon> component from this library (but this way you'll have to figure out another workaround/replace your UI library).

You can also try playing with:

import { dom } from '@fortawesome/fontawesome-svg-core';
dom.watch()

to make single instance of library do both jobs... but this is not recommended usage either.

[MikeDabrowski]

😢 eh, not good... I'm surprised no one had this problem before.
My app is not that big yet so I will revert to the first approach then.
Thanks!

[devoto13]

Sorry!

PS You can also check, maybe your UI library supports passing icons as SVG string (Material does it). This way you can use <fa-icon> for you own code and pass icon as SVG string to the UI library.

[MikeDabrowski]

Almost 100% they not support it. At least not yet. I'm using PrimeNG and want to set menu icons.
Here's discussion: primefaces/primeng#5098

[devoto13]

Yeah, this seems to be the feature request: primefaces/primeng#4588. You may also try to poke PrimeNG team there!