27 Feb 2022

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


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": [

Let me know if you need more information.

How do I fix issues of displaying icons?



28 Feb 2022

Best Answer

best answer

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!



28 Feb 2022


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


28 Feb 2022


it worked, nice!

© 2023 Copyrights reserved for