How to use icons in CSS Pseudoclasses while using angular-fontawesome

[hairbo]

I know this isn't a bug or feature, but I can't find any documentation around this, so at the risk of getting slapped on the wrist, I'm asking this question here.

There are few places in my Angular app (Angular 13, FA 6.2.1, angular-fontawesome 0.10.2) where I'd like to use icons in my CSS files using pseudoclasses. The documentation says to do something like this:

.myClass::after {
  font: var(--fa-font-solid);
  content: '\f107';
}

That doesn't work, I'm guessing in part because angular-fontawesome doesn't set --fa-font-solid anywhere. So what I don't know is if I'm doing something stupid (like I either need to set or import --fa-font-solid somewhere), or if I just can't use FA fonts in CSS pseudo classes if I'm using angular-fontawesome. If the latter case is true, then does that means I need to explicitly import the fontawesome stylesheet(s) into my project in the angular.json file? If that is the case, then that might well bloat my project, if I'm only importing the icons I need for angular-fontawesome (e.g. using the "library" approach, and importing each icon individually, rather than entire icon suites)

[devoto13]

Using pseudo classes is not possible with angular-fontawesome in principle because angular-fontawesome uses SVGs to render icons (one SVG per icon) and in a such a way only icons you use are included in the bundle. To use pseudo class you need to use a font instead of SVGs. The font is one giant file and can't be automatically filtered based on usage. One needs to use a subsetter to generate a new font to only include the necessary icons.

You can read more about the differences in https://fontawesome.com/docs/web/dig-deeper/webfont-vs-svg

In the majority of the cases it is possible to either use fa-icon component instead of the pseudo class or render icon as text and pass it to where it needs to be included.

[hairbo]

Thanks for the reply! Yeah, that's kind of what I figured, but I wanted to be sure. I might suggest adding something around this issue in the help docs somewhere.