Shilpa
27 Feb 2022
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?
Rakshit
28 Feb 2022
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!
Shilpa
28 Feb 2022
Thank you for the response, I will give it a quick try with mentioned order of the styles[].
Shilpa
28 Feb 2022
it worked, nice!
© 2024 Copyrights reserved for web-brackets.com