Font Awesome Library not working with Angular Material library in Angular Project

Question

I was trying to use font awesome css in my project but the css doesn't get applied to HTML elements. If i remove Angular Material theme then only the Font Awesome CSS is working. But then Angular Material Components will not work!!!

@import "~font-awesome/css/font-awesome.css";
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Any guidance for this -

Answer 1

One of the easiest ways is to import the CSS at the global level in the index.html in src folder. You can do this with a simple <link rel=“stylesheet” href=“/fontawesome.css

That should hopefully fix issue

Answer 2

In angular.json, we have styles property which will allow to load third party css files.

"styles": [
     "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
     "font-awesome/css/font-awesome.css"
],