2

I am trying to build and the font awesome is large so I am trying to completely replace it with 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'>

The paginator doc does not show anything.

Phil Huhn
  • 3,307
  • 3
  • 18
  • 35
  • Explain your issue a bit more. What is the step you are following to use prime-icons? Any Image or code you can share ? – DirtyMind Sep 19 '18 at 07:20
  • I am using Angular 6 and primeicons 1.0.0-beta.10 and primeng 5.2.4 per package.json. I have replaced 'fa fa.edit' with 'pi pi.pencil', etc... I removed @import "font-awesome/css/font-awesome.min.css"; from style.css and then the paginator for the above p-table has -- 1 2 -- (missing < >), and any dropdowns are missing the down caret. – Phil Huhn Sep 19 '18 at 12:41

2 Answers2

4

I created your scenario i used primeNg 6:

  • Step 1: npm install primeicons --save
  • Step 2: Import the prime icons in style.css or angular.json

I added the in style.css like below :

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

And use Icon anywhere in your app:

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

And it is working as expected. Make sure you are importing primeicons path in style.css correctly. I think you might miss importing icons.

DirtyMind
  • 2,353
  • 2
  • 22
  • 43
  • My style.css has the following: `@import "primeicons/primeicons.css"; @import "primeng/resources/themes/flick/theme.css"; @import "primeng/resources/primeng.min.css"; ` – Phil Huhn Sep 20 '18 at 00:02
  • Hey DirtyMind: The declared PrimeIcons classes pencil, plus and trash on buttons display just fine. The paginator and drop-downs do not display icons correctly. On the paginator and drop-downs controls the icons are not referenced. – Phil Huhn Sep 20 '18 at 00:13
  • I am able to see Icons properly in pager and dropdown properly. Might be because of your Primeng vs ^5.2.4. I downgraded my app to 5.2.4 and getting lot of erros so not able to replicate – DirtyMind Sep 20 '18 at 07:02
1

Updated to the PrimeNG:

"primeng": "^6.1.4",

and the problem is solved.

Hey DirtyMind: You referenced a different version and that triggered the solution.

Phil Huhn
  • 3,307
  • 3
  • 18
  • 35