angular-fontawesome 5 icons with primeng 7 or Angular 2+

Question

I have followed the instructions to use svg icons of angular-fontawesome 5 icons. Please find the link below

https://www.npmjs.com/package/@fortawesome/angular-fontawesome

As a first step

npm i --save @fortawesome/fontawesome-svg-core 
npm i  --save @fortawesome/angular-fontawesome 

If I am correct to use the brand icons

npm i --save @fortawesome/free-brands-svg-icons

Step two: In app.module.ts file: Imported the following

import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
import {fab, faFacebookSquare, faGoogle} from '@fortawesome/free-brands-svg-icons';

Step three: As per the primeng documentation I want to use the brand icons inside the button.

<div class="center-text">
 <p-button icon="fab fa-google" label="Click"></p-button> 
</div>

No errors in the console. But couldnt see the icon in display.

As an alternative way:

  <div class="center-text">
  <i class="fab fa-google"></i>
   <p-button label="Click"></p-button>
  </div>

Still no output. Kindly help how to bring the brand icons inside the primeng buttons.

Answer 1

To use Font Awesome together with PrimeNG you need to use the standard fontawesome package, not angular-fontawesome.

npm install --save-dev @fortawesome/fontawesome-free

And in your angular.json file:

"styles": [
    "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
    ...
],

See https://forum.primefaces.org/viewtopic.php?t=56786 for more information.