如何将 PrimeIcons 与 table/grid 分页器一起使用

Question

我正在尝试构建，但很棒的字体很大，所以我试图用 PrimeIcons 完全替换它

<p-table #dt id='incidents-grid' [value]='incidents' [totalRecords]='totalRecords'
    expandableRows='true' [responsive]='true' dataKey='IncidentId' *ngIf='visible'
    [rows]='5' [paginator]='true' [rowsPerPageOptions]='[5,10,50]'
    [lazy]='true' (onLazyLoad)='loadIncidentsLazy($event)' [loading]='loading'>

分页器文档没有显示任何内容。

Answer 1

我使用 primeNg 6 创建了你的场景：

第 1 步：npm install primeicons --save
第 2 步：导入 style.css 或 angular.json

我在 style.css 中添加了如下所示：

@import '../node_modules/primeng/resources/primeng.min.css';
@import '../node_modules/primeng/resources/themes/omega/theme.css';
@import '../node_modules/primeicons/primeicons.css';

并在您应用的任何位置使用图标：

<p-tabView class="tabdetail">
       <p-tabPanel header="Basic Info" leftIcon="pi pi-calendar">
       </p-tabPanel>
</p-tabView>

它正在按预期工作。确保您正确导入 style.css 中的 primeicons 路径。我想你可能会错过导入图标。

Answer 2

已更新至 PrimeNG：

"primeng": "^6.1.4",

问题就解决了。

嘿 DirtyMind：您引用了不同的版本并触发了解决方案。

如何将 PrimeIcons 与 table/grid 分页器一起使用

How to use PrimeIcons with table/grid paginator

primeng

angular

primeng-turbotable