Значок FontAwesome не отображается для кнопки

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>

Значок карандаша будет отображаться, а кнопка - нет. Однако кнопка не будет.

Это вырвано из основного примера

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

(я добавил значок карандаша просто для доказательства, что это не проблема с CSS, который я пытаюсь включить)

Почему это происходит?

Answer 1

Определите великолепный значок шрифта в атрибуте class на кнопке вместо атрибута icon.

<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>