The Primeng Dataview buttons don’t look like

Question

See the image below with the arrow indicating which is the button;

That button’s not showing, it’s supposed to be like this;

What is going on? No error message appears anywhere.

This is a Primeng library using Angular.

=======================UPDATING=================

This is my repository;

This is my page with problem;

 <!--INICIO DO CONTEUDO-->
 <section class="content-header">
    <h3>{{ title }}</h3>
  </section>

  <section class="content">
   <section class="invoice">       

      <div class="container">
          <div class="ui-g">

      <form autocomplete="off" (ngSubmit)="pesquisar()">
            <div class="ui-g-12 ui-md-6 ui-fluid">
              <label>Valor</label>
              <input pInputText type="text" name="price" [(ngModel)]="filtro.price"  pTooltip="Realizar consulta pelo valor do Cardápio" tooltipPosition="top">
            </div>

            <div class="ui-g-12">
              <button pButton type="submit" label="Pesquisar"></button>
            </div>
      </form> 
          </div>
          <div class="ui-g">
            <div class="ui-g-12 ui-md-7">
                <p-dataTable [value]="menu"  
                [paginator]="true" [rows]="5"
                [responsive]="true"
                emptyMessage="Nenhum menu encontrado"
                [paginator]="true" [rows]="filtro.itensPorPagina"
                [lazy]="true" [totalRecords]="totalRegistros"
                (onLazyLoad)="aoMudarPagina($event)"  #tabela>

                    <p-column field="name" header="Nome" styleClass="col-data"></p-column>
                    <p-column field="description" header="Descrição" styleClass="col-desc"></p-column>
                    <p-column field="price" header="Valor" styleClass="col-valor">
                        <ng-template let-lanc="rowData" pTemplate="body">
                            <span >{{ lanc.price | number:'1.2-2' }}</span>
                        </ng-template>
                    </p-column>
                    <p-column styleClass="col-acoes">
                            <ng-template let-lanc="rowData"  pTemplate="body">
                            <button pButton icon="fa fa-pencil" pTooltip="Editar" tooltipPosition="top"></button>
                            <button pButton icon="fa fa-trash" 
                                pTooltip="Excluir" 
                                tooltipPosition="top" 
                                (click)="confirmarExclusao(lanc)">
                            </button>
                            </ng-template>
                        </p-column>
                </p-dataTable>

            </div>

        </div>

        </div>

    </section>
  </section>


  <!--
  <a pButton class="pi pi-pencil"></a>


  <table class="table table-hover ">
            <thead class="thead-default">
            <tr>
                <th>Nome</th>
                <th>Descrição</th>
                <th>Ação</th>
            </tr>
            </thead>
            <tbody>
                <tr *ngFor="let menu of menus">
                <td>{{ menu.name }}</td>
                <td>{{ menu.description }}</td>
                <td>
                    <a  class="btn btn-sm btn-primary">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                        Editar
                    </a>
                </td>
                </tr>
            </tbody>
        </table>




  -->

This is where I’ve installed the modules;

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MainComponent } from './restaurant/main/main.component';
import { ListComponent } from './restaurant/list/list.component';
import { AddComponent } from './restaurant/add/add.component';
import { EditComponent } from './restaurant/edit/edit.component';
import { AdminRoutingModule } from './routes/admin-routing.module';
import { SharedModule } from '../shared/shared.module';
import { AddmenuComponent } from './menu/addmenu/addmenu.component';
import { ListmenuComponent } from './menu/listmenu/listmenu.component';
import { EditmenuComponent } from './menu/editmenu/editmenu.component';

import { InputTextModule } from 'primeng/components/inputtext/inputtext';
import { ButtonModule } from 'primeng/components/button/button';
import { DataTableModule } from 'primeng/components/datatable/datatable';
import { TooltipModule } from 'primeng/components/tooltip/tooltip';
import { DropdownModule } from 'primeng/components/dropdown/dropdown';

@NgModule({
  imports: [
    CommonModule,
    BrowserAnimationsModule,

    FormsModule,
    AdminRoutingModule,
    SharedModule,

    //Módulos de terceiros
    InputTextModule,
    ButtonModule,
    DataTableModule,
    TooltipModule,
    DropdownModule

  ],
  declarations: [
    MainComponent, 
    ListComponent, 
    AddComponent, 
    EditComponent,


    AddmenuComponent, 
    ListmenuComponent, 
    EditmenuComponent
  ],
  exports: [
    MainComponent, 
    ListComponent, 
    AddComponent, 
    EditComponent, 


    AddmenuComponent, 
    ListmenuComponent, 
    EditmenuComponent
  ], 

})
export class AdminModule { }

Answer 1

Install the Primeng icon pack.

Add to angular.json the path (path) to the icon CSS:

"styles": ["node_modules/primeicons/primeicons.css"]