angularprimengprimeicons

Angular 16 button not parsed?


In my Angular 16 project, I added primeicon/primeng button with the below code

  <button pButton label="Clear" class="p-button-outlined" icon="pi
 pi-filter-slash" (click)="clear(dt)"></button>

I expect it renders like below as in the codessandbox

<button _ngcontent-ng-c2027729110="" pbutton="" label="Clear" icon="pi pi-filter-slash" class="p-element p-button-outlined p-button p-component" ng-reflect-label="Clear" ng-reflect-icon="pi pi-filter-slash"><span class="p-button-icon p-button-icon-left pi pi-filter-slash" aria-hidden="true"></span><span class="p-button-label">Clear</span></button>

But instead, on my test page, it renders

<button _ngcontent-ng-c2105745702="" pbutton="" label="Clear" icon="pi pi-filter-slash" class="p-button-outlined"></button>

I wonder what setup I need to make it work?

Thanks


Solution

  • Add this to your module.ts file:

    import {ButtonModule} from 'primeng/primeng';
       
    @NgModule({
       imports: [
          ButtonModule
       ]