Using PrimeNG and FontAwesome

Using PrimeNG Icons

See - https://www.primefaces.org/showcase/ui/misc/primeicons.xhtml

Setup

To install:

npm install --save primeng
npm install --save primeicons

To have the icons show up you need to link in the CSS in Angular.json

            "styles": [
              "src/styles.css",
              "node_modules/font-awesome/css/font-awesome.min.css",
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/primeng/resources/themes/nova-dark/theme.css",
              "node_modules/primeicons/primeicons.css"
            ],

Notes

From - https://github.com/primefaces/primeng/issues/5098

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>