Angular 如何将PrimeIcons与表格/网格分页器一起使用

Angular 如何将PrimeIcons与表格/网格分页器一起使用,angular,primeng,primeng-turbotable,Angular,Primeng,Primeng Turbotable,我试图建立和字体真棒是大的,所以我试图完全取代它的素数图标 <p-table #dt id='incidents-grid' [value]='incidents' [totalRecords]='totalRecords' expandableRows='true' [responsive]='true' dataKey='IncidentId' *ngIf='visible' [rows]='5' [paginator]='true' [rowsPerPageOptio

我试图建立和字体真棒是大的,所以我试图完全取代它的素数图标

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


paginator文档没有显示任何内容。

我创建了您的场景,我使用了Priming 6:

  • 步骤1:npm安装primeicons——保存
  • 步骤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路径。我想您可能会错过导入图标的机会。

已更新到Priming:

“涂底漆”:“^6.1.4”

问题解决了


嘿,DirtyMind:您引用了另一个版本,这触发了解决方案。

请进一步解释您的问题。使用主图标的步骤是什么?您可以共享任何图像或代码吗?我使用Angular 6和primeicons 1.0.0-beta.10以及primeng 5.2.4 per package.json。我已经用“圆珠笔”替换了“fa fa.edit”等。。。我删除了@import“font awesome/css/font awesome.min.css”;从style.css开始,然后上面p表的分页器有--12--(缺少<>),任何下拉列表都缺少向下插入符号。My style.css有以下内容:
@import“primeicons/primeicons.css”@导入“primeng/resources/themes/flick/theme.css”@导入“priming/resources/priming.min.css”Hey DirtyMind:声明的PrimeIcons类pencil、plus和trash on按钮显示得很好。分页器和下拉列表不能正确显示图标。在paginator和下拉控件上,图标没有被引用。我能够在pager和下拉控件中正确地看到图标。可能是因为您的预充vs^5.2.4。我将我的应用程序降级到5.2.4,并且出现了很多错误,因此无法复制。我很高兴你找到了解决方案:)