user image

Shilpa
Published in : 2022-02-27

Primeng Angular -> Primeicons are not visible in chrome & firefox browsers unless I reload page?

Angular

I am using Angular 11 and importing PrimeNg to my application. To display icons for grids, buttons, paginators, etc. I am using primeicons provided by PrimeNg library. Here are my package JSON library listings. When I start application in my local machine, it is not displaying icons at first. But if I refresh page, it will show icons. Same behavior can be found in firefox browser.

Here is my package.json

 ... "@angular/cdk": "^12.2.3", "@angular/common": "~11.0.0", "@angular/compiler": "~11.0.0", "@angular/core": "~11.0.0", "@angular/forms": "~11.0.0", "@angular/platform-browser": "~11.0.0", "@angular/platform-browser-dynamic": "~11.0.0", "@angular/router": "~11.0.0", "@ng-idle/core": "^11.1.0", "@ng-idle/keepalive": "^11.0.3", "@ngx-translate/core": "^13.0.0", "@ngx-translate/http-loader": "^6.0.0", "chart.js": "^3.5.1", "crypto-js": "^4.0.0", "device-detector-js": "^2.2.7", "flag-icon-css": "^3.5.0", "flatpickr": "^4.6.9", "mdbootstrap": "^4.20.0", "ngx-autosize": "^1.8.4", "ngx-cookie-service": "^11.0.2", "ngx-paypal": "^7.0.0", "ngx-stripe": "^10.1.2", "primeng": "^11.4.5", "primeicons": "^4.1.0", "rxjs": "^6.6.7", ...

After searching over internet I found some workarounds which worked for others, but not for me.

Here are code changes from angular.json

..."styles": [ "src/styles.scss", "node_modules/primeicons/primeicons.css", "node_modules/primeng/resources/themes/fluent-light/theme.css", "node_modules/primeng/resources/primeng.min.css", ] ...

Let me know if you need more information.

How do I fix issues of displaying icons?

Comments

Rakshit Date : 2022-02-28

Best answers

34

Best answers

34

Hi, Your version for PrimeNg and PrimeNg Icons looks good, but it can be caused by overwriting CSS in your code.

In your angular.json file, try to update order of the loading CSS and see if it works by restarting your server each time you update your angular.json.

..."styles": [ "node_modules/primeng/resources/themes/fluent-light/theme.css", <--- 1st on styles array "node_modules/primeng/resources/primeng.min.css", <--- 2nd "node_modules/primeicons/primeicons.css", <--- 3rd "src/styles.scss", <-------------- put this css file at last. ] ...

Note:  I am assuming that you are not using font awesome, you are only using prime icons!

Hope this answer will work for you! Let me know if it fails!


Edit 1:

Reason: Ordering of importing the libraries are important, If you put styles.scss or styles.css  - custom css at the bottom, your changes will never be overridden!

 

Shilpa Date : 2022-02-28

Best answers

10

Best answers

10

Thank you for the response, I will give it a quick try with mentioned order of the styles[].

Shilpa Date : 2022-02-28

Best answers

10

Best answers

10

it worked, nice!

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

How to bind Weekends off to my kendo calendar in Angular?
Publish date: 2022-03-11 | Comments: 2

Tag: Angular

How to translate Angular application easily?
Publish date: 2022-03-03 | Comments: 2

Tag: Angular

Static code analysis tools integration with latest Angular version
Publish date: 2022-02-25 | Comments: 1

Tag: Angular

Angular - PrimeNG charts adding colors for each legends dynamically
Publish date: 2022-02-27 | Comments: 1

Tag: Angular

How to calculate distance between two Bluetooth devices?
Publish date: 2022-02-26 | Comments: 1

Tag: Angular