Feature request: Possibility to use <i> by replacing it with <svg> to make it more flexible

[GaetanRouzies]

Describe the problem you'd like to see solved or task you'd like to see made easier

I know the following issue has been completed but I think we still need to be able to use the <i> tag like on the official SVG Package, see documentation: SVG Core Plugins page.

Avantages :

1. Developers used to use the <i> on other project can keep using it (DX)
2. Developers can copy/paste icon code directly from FontAwesome documentation (DX)
3. Developers can pass CSS class to external library Input(). See example below.

<!-- Example, the package PrimeNG accept a CSS class to personalize the button icon -->
<p-button
(onClick)="doSomething()"
icon="fa-solid fa-pen" <!-- Won't work with this package, we need to use the official package (non-angular) -->
></p-button>

Is this in relation to an existing part of angular-fontawesome or something new?

Something new for this package, but existing in the official FontAwesome SVG plugin.

What is 1 thing that we can do when building this feature that will guarantee that it is awesome?

By behind more flexible, it won't force developers to use both angular-fontawesome AND Web Font package for example (@fortawesome/fontawesome-free) or choose between one or the other.

Why would other angular-fontawesome users care about this?

No need to hesitate between the official package and this one.

On a scale of 1 (sometime in the future) to 10 (absolutely right now), how soon would you recommend we make this feature?

9, that's the main reason why i don't recommend the usage of this library in my clients projects and i must use Web Font or Official SVG one to preserve DX and make it usable for PrimeNG (for example).

Feature request checklist

• This is a single feature (i.e. not a re-write of all of Font Awesome)
• The title starts with "Feature request: " and is followed by a clear feature name (Ex: Feature request: moar cowbell)
• I have searched for existing issues and to the best of my knowledge this is not a duplicate

[devoto13]

See option 2 in the https://github.com/FortAwesome/angular-fontawesome/blob/master/docs/guide/advanced-uses.md#replace-i-tags-with-icons-in-the-arbitrary-html. Not 100% sure it will work with PrimeNG, but I guess it should if PrimeNG generates the correct markup 🤔 Whether it will work with dynamic property updates is another question. This approach also has performance caveats, so use with care.

I don't think we'll be offering a better integration between the Angular component and the MutationObserver moving forward though. My current thinking is to move in the opposite direction as the way FontAwesome SVG Core works does not play nice with core Angular features, like SSR and animations.

In summary, there are three approaches:

1. Angular component (SVG-based) which aims to offer best Angular experience, completion, type checking, tree-shaking, etc.
2. FontAwesome SVG Core (SVG-based) which is more flexible.
3. FontAwesome Free/Pro (WebFonts-based).

For an average Angular project I would recommend (1) with a solution described in the linked doc page (where needed). For a project where most of the icons are dynamic and come in <i> form, you may have better luck to give up on type-checking/Angular-ness and just go with (2) or (3). As usual, it's a trade-off and you chose the tool which works best for you, we provide options.

PS Another issue about PrimeNG - #117

[devoto13]

primefaces/primeng#4588 (comment) claims that custom icons are fixed in v10, although it's not very clear how exactly it is "fixed" 😄

UPD https://primeng.org/customicons#fontawesome, pretty sure this approach will work just fine with <fa-icon> component.