如何在表格/网格分页器中使用PrimeIcons

时间:2018-09-19 03:28:48

标签: angular primeng primeng-turbotable

我正在尝试构建并且字体很棒,所以我试图将其完全替换为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'>

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

2 个答案:

答案 0 :(得分:2)

我使用primeNg 6创建了您的方案:

  • 第1步:npm安装primeicons --save
  • 第2步:将主要图标导入style.css或angular.json

我在in.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路径。我认为您可能会错过导入图标的机会。

答案 1 :(得分:0)

已更新为PrimeNG:

  

“ primeng”:“ ^ 6.1.4”,

问题解决了。

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