Q:

FontAwesome not loaded correctly with Angular elements

I have an Angular app that is packaged using Angular Elements and then loaded into another web application. I am using Font Awesome but icons are being displayed as boxes.
Similar to what is described in How to know if a font (@font-face) has already been loaded?
I have added fontawesome through npm.
Also I added the following to my angular.json
"styles": [
    "src/styles.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "node_modules/font-awesome/css/font-awesome.min.css"
]

This is how I am using FA.
<button class="btn btn-primary btn-sm fa fa-bars">
  {{ label }}
</button>

So my question is what am I missing here? Any help is much appreciated.

A:

instead of manually configure font-awesome in the angular project please use NPM package, which will auto-configure everything for  you in few simple steps 
Please refer this like/npm document 
https://www.npmjs.com/package/@fortawesome/angular-fontawesome 

