Using Font Awesome 5 in Angular application before bootstrapping (and after bootstrapping)

We have been using Font Awesome 4 up until now and are now in the process to upgrade to version 5 properly. All icons are working perfectly and this package seems to accomplish everything we have used so far in version 4 while being easy to use.

There is sadly one issue we are unable to solve: we would like to use a spinning circle-notch icon before Angular is done bootstrapping our application. With Font Awesome 4, we would just add font-awesome’s CSS files to .angular-cli.json and add <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i> to the HTML file.

This approach doesn’t work, not even if importing the icons in main.ts without angular-fontawesome as described here: https://fontawesome.com/how-to-use/use-with-node-js

Is there a recommended way to achieve the same behavior?

[devoto13]

@wartab I would not rely on icons auto replacement in this case. Rendering icon manually seems to work. See here.

[mlwilkerson]

There might be a connection between this issue and #18.