Primeng: Replace FontAwesome with PrimeIcons

[cagataycivici]

Create our own iconset so we don't need to depend on FontAwesome. Still it should be able to use font awesome 4, 5 or other icon sets with the components like button icons or menu icons.

[dhniels]

Is PrimeIcons a thing already or are you creating it from scratch?

[onursenture]

It's new @dhniels. We're working on it.

[dhniels]

@BootsThunderclap @cagataycivici They are working on an angular component currently, if it helps. I'm using it successfully, though its still in beta. Instead of assigning an icon like <i class="fa fa-times"></i> and having it replaced with an svg element in the DOM, you instead use it like <fa-icon [icon]="faTimes"></fa-icon>

This works well and is compatible with angulars controls/directives like two way binding, ngIf, [class], etc

[dhniels]

@cagataycivici in the meantime, is there anyway to use the far prefix for fontawesome icons?

for example, I have a prime menu item, {label: 'On Hold', icon: 'fa-hand-paper-o'} that no longer works with FA5.

before, with FA4, if I wanted the outlined icon i would use fa-hand-paper-o but now in FA5 its been changed to use the prefix instead, so the same icon would now be far fa-hand-paper

[Qocotzxin]

@dhniels I'm sorry, but did you say you are using that beta component? If that's the case could you provide a way for it's download?

There are news about this release to support FA5?

Thanks in advance!

[dhniels]

@Qocotzxin its available at FortAwesome's GitHub
https://github.com/FortAwesome/angular-fontawesome

It doesnt work with primeNG but it does allow you to use FA5 and SVG icons in angular in a way that preserves angular's front-end functionalities like *ngIf and [class], etc

[Qocotzxin]

@dhniels ok, thanks for the answer!

[cagataycivici]

Work has started for alpha-3;

https://www.npmjs.com/package/primeicons

Note that this change breaks the dependency of PrimeNG to Font-Awesome 4.x and makes it possible to use it with any FA version since PrimeNG does not depend on FA anymore.

[eddiesTime]

@cagataycivici Is there any option to swap the primeicons used in components like p-dialog with the font-awesome icons like they were used in primeNG 5.2? For example the close icon for the dialog?

Edit: Currently I am swapping them inside the components css to use the same icons that were used in primeNG 5.2

[DavyDeDurpel]

For those wanting to combine FA 4 and 5 icons on older versions of PrimeNG, there's a very simple trick to support both.
Add following rules to your css file (don't forget to first add FA 5 support to your application):

/* font awesome 5 */
.fa.fab, .fa.fal, .fa.far, .fa.fas {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}
.fa.fas {
  font-family: Font Awesome\ 5 Free;
  font-weight: 900;
}
.fa.far {
  font-family: Font Awesome\ 5 Free;
  font-weight: 400;
}

If you want to use a FA 5 icon you only need to prefix it with 'fas ' or 'far ' anywhere PrimenNG supports setting a FA icon.

ex. <p-confirmDialog icon="fas fa-question-circle"></p-confirmDialog>

[yoni333]

i think you need to tell the developer in "get started" section - that they also need to add font-awesome.
it will save time.....

[nevliin]

@yoni333 can not agree more, I just spent a few hours trying to figure out why icons are not working. The website makes it seem like they are provided by primeicons, font awesome is mentioned nowhere.
Please make it happen.

[ragavanrajan]

For those wanting to combine FA 4 and 5 icons on older versions of PrimeNG, there's a very simple trick to support both.
Add following rules to your css file (don't forget to first add FA 5 support to your application):

/* font awesome 5 */
.fa.fab, .fa.fal, .fa.far, .fa.fas {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}
.fa.fas {
  font-family: Font Awesome\ 5 Free;
  font-weight: 900;
}
.fa.far {
  font-family: Font Awesome\ 5 Free;
  font-weight: 400;
}

If you want to use a FA 5 icon you only need to prefix it with 'fas ' or 'far ' anywhere PrimenNG supports setting a FA icon.

ex. <p-confirmDialog icon="fas fa-question-circle"></p-confirmDialog>

Tried it but not working

[RDyego]

For those wanting to combine FA 4 and 5 icons on older versions of PrimeNG, there's a very simple trick to support both.
Add following rules to your css file (don't forget to first add FA 5 support to your application):

/* font awesome 5 */
.fa.fab, .fa.fal, .fa.far, .fa.fas {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}
.fa.fas {
  font-family: Font Awesome\ 5 Free;
  font-weight: 900;
}
.fa.far {
  font-family: Font Awesome\ 5 Free;
  font-weight: 400;
}

If you want to use a FA 5 icon you only need to prefix it with 'fas ' or 'far ' anywhere PrimenNG supports setting a FA icon.
ex. <p-confirmDialog icon="fas fa-question-circle"></p-confirmDialog>

Tried it but not working

Try it:
npm i @fortawesome/fontawesome-free --save

and Import the styles in angular.json:

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

scripts": [
...
"node_modules/@fortawesome/fontawesome-free/js/all.js"
...
]