Angular + FontAwesome: specify using a class

Question

I'm working in Angular 11 with FontAwesome, and there's a context where I'd like to specify an icon by specifying a class attribute on an html element, after the fashion of the vanilla font-awesome usage, instead of by specifying an [icon] attribute. Is there a good way for me to do that in Angular, though?

This doesn't produce any visible icon:

<fa-icon class="fa fa-bars"></fa-icon>

But this does:

<fa-icon [icon]="['fas', 'bars']"></fa-icon>

I'd like to specify this as a class instead of with [icon] because I have an ngRepeat in which I need to vary the icon depending on a property of the repetition's item and set two classes on the element, varying by that same property. Is there some approach that would be best for my needs?

Answer 1

You can simply use <span>. Try this: <span class="fa fa-bars"></span>

Answer 2

Also ensure you only run: " npm install font-awesome " instead of the more specific commands listed on:

https://github.com/FortAwesome/angular-fontawesome

You can then just import the CSS directly in the style.css file by adding this line:

@import "~font-awesome/css/font-awesome.css";