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.

Not sure what you are referring to. Everywhere in the documentation you link, they are creating icons through their component `fa-icon`, so as you have above it would be `` — peinearydevelopment, Jan 22 '19 at 21:37
You can find a more complete example how to do this [here](https://github.com/PdUi/stack-overflow-answer-repos/tree/master/ng-fontawesome/projects/ng-fa/src/lib). — peinearydevelopment, Jan 22 '19 at 21:38
@peinearydevelopment Thanks for this I have now used the tag. I could see the icon coming up on the screen but how do you push inside the button. — Ragavan Rajan, Jan 22 '19 at 21:39
I don't believe you can. As you can see if you look in the dev tools, that `fa-icon` html element gets replaces with an svg. I think you would have to have the button surrounding the icon. — peinearydevelopment, Jan 22 '19 at 21:40
@peinearydevelopment sorry quite confused. In the dev tools I could see the svg element. But the button tag is outside of SVG. — Ragavan Rajan, Jan 22 '19 at 21:45

score 3 · Answer 1 · answered Sep 16 '19 at 13:12

3

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.

answered Sep 16 '19 at 13:12

Peter Wretmo

4,032
1
12
6

4

Thanks. The way you have mentioned is loading all icons. Which will increase the bundle size. Also I am looking for brand icons only not all the icons – Ragavan Rajan Sep 16 '19 at 20:28

score 0 · Answer 2 · edited Mar 09 '21 at 21:04

Maybe this will help someone for sure. The following steps will help you to load only the icons that you want.

Assuming you want to use only brand icons

Step 1:

npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/fontawesome-svg-core 
npm i  --save @fortawesome/angular-fontawesome

Step 2:

In app.module.ts under imports

Also, add the following code at the top of the module. Overall it will look like below

import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
import { fab } from '@fortawesome/free-brands-svg-icons';
library.add(fab);

Step 3: In app.module.ts constructor:

constructor(private library: FaIconLibrary) {
    library.addIcons(
        faStackOverflow,
        faGithub,
        faMedium,
        faLinkedinIn,
    );
}

Step 4: In app.module, under imports

import {
    FaIconLibrary,
    FontAwesomeModule,
} from '@fortawesome/angular-fontawesome';
import {
    faStackOverflow,
    faGithub,
    faMedium,
    faLinkedinIn
} from '@fortawesome/free-brands-svg-icons';

Step 5: To test in app.component.html. using github as an example

<a href="https://www.snatchexcel.com/" target="_blank">
  <fa-icon [icon]="['fab', 'github' [spin]="true" ]"></fa-icon> 
</a>

Run it using ng s to see your changes.

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

2 Answers2