FontAwesome Icon not showing for button

Question

<ng-template pTemplate="summary" let-rowData>
<div style="text-align:left">
  <i class="fa fa-pencil" title="Edit"></i>
  <button type="button" pButton icon="fa fa-pencil" (click)="showDialogToAdd()" label="Add"></button>
</div>

The pencil icon will show but the button will not. However, the button will not.

This is ripped from the primeng example

https://github.com/primefaces/primeng/blob/master/src/app/showcase/components/table/tablepagedemo.html

(I added the pencil icon just for proof it's not an issue with the css I am attempting to include)

Why is this happening?

Answer 1

Define the font-awesome icon in a class attribute on your button, instead of a icon attribute.

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> <div style="text-align:left"> <i class="fa fa-pencil-alt" title="Edit"></i> <button type="button" pButton class="fa fa-pencil-alt" ></button> </div>