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 reload Angular component without refreshing page?
Publish date: 2022-03-02 | Comments: 1

Tag: Angular

Angular: Change columns to rows, and rows to columns while running a *ngFor loop.
Publish date: 2022-03-06 | Comments: 0

Tag: Angular

Adding country flags is really struggling thing?
Publish date: 2022-02-25 | Comments: 6

Tag: Angular

Angular: HTML anchor tag with #idref issue
Publish date: 2022-03-01 | Comments: 2

Tag: Angular

How to call event handler onload for Angular application?
Publish date: 2022-03-02 | Comments: 2

Tag: Angular

In Angular project, RxJS isStopped is deprecated! What is the alternative?
Publish date: 2022-02-28 | Comments: 1

Tag: Angular