Primeng: Some icons don't appear in new 6.0.0-rc.1

[FLNacif]

If you have a PrimeNG PRO Support subscription please post your issue at;

https://pro.primefaces.org

where our team will respond within 4 business hours.

If you do not have a PrimeNG PRO Support subscription, fill-in the report below. Please note that
your issue will be added to the waiting list of community issues and will be reviewed on a first-come first-serve basis, as a result, the support team is unable to guarantee a specific schedule on when it will be reviewed. Thank you for your understanding.

Current Waiting Time: ~8 weeks.

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
Please demonstrate your case at stackblitz by using the issue template below. Issues without a test case have much less possibility to be reviewed in detail and assisted.

https://stackblitz.com/github/jvmiorpw

Current behavior
Some icons don't appear like the arrow in dropdown component. It does in version 5.2.7

Expected behavior
Icons in dropdown and calendar, for example, should appear like in old versions.

Minimal reproduction of the problem with instructions
As can be seen in https://stackblitz.com/github/jvmiorpw, components like dropdown and calendar don't show icons anymore. I think this is related to #5098, but the milestone was beta 6.0.0-beta.1

What is the motivation / use case for changing the behavior?

Please tell us about your environment:
PrimeNg 6.0.0-rc.1

• Angular version: 5.X
  Angular 6.0.5

• PrimeNG version: 5.X
  PrimeNg 6.0.0-rc.1

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  All

• Language: [all | TypeScript X.X | ES6/7 | ES5]

• Node (for AoT issues): node --version =

[ctrl-brk]

Install primeicons, include css from there

[FLNacif]

Sorry, but I didn't understand. PrimeIcons is not a dependency of PrimeNG? And which css should I include if primeicons do not seems to have any css.

[alximbot]

I had the same problem and resolved by importing primeicons.css into my root sass file
@import '~primeicons/primeicons.css';

[ctrl-brk]

Yes, looks like you need to install it manually for now. Their intend was that you can use your own icons (glyph, fa, etc) OR primeicons but I'm not sure how to achieve this yet.
You need to use node_modules/primeicons/primeicons.css

[FLNacif]

Thank you guys. Indeed it works now. Unfornutally others places where I use FA now do not show icons anymore. I will have to investigate the cause.

[cagataycivici]

See the migration guide please to resolve the issue with font awesome icons. You need add fa prefix;

https://github.com/primefaces/primeng/wiki/Migration-Guide

[raghanag]

Hi even though I have included the primeicons, its not working with angular 5.2.0 version, here is the configuration we have in our project. can someone throw light on this.

"dependencies": {
"@angular/animations": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"@types/plotly.js": "^1.38.5",
"angular-plotly.js": "^0.1.14",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"csvtojson": "^2.0.8",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"lodash": "^4.17.10",
"plotly.js": "^1.39.4",
"primeicons": "^1.0.0-beta.10",
"primeng": "^6.1.1",
"rxjs": "^5.5.6",
"ya-csv": "^0.10.1",
"zone.js": "^0.8.19"
}

"styles": [
"../node_modules/primeng/resources/themes/nova-light/theme.css",
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/primeng/resources/themes/bootstrap/theme.css",
"../node_modules/primeng/resources/primeng.css",
"../node_modules/font-awesome/css/font-awesome.css",
"styles.css",
"../node_modules/primeicons/resources/primeicons.css"
]

[brunnoDatum]

Hi even though I have included the primeicons, its not working with angular 5.2.0 version, here is the configuration we have in our project. can someone throw light on this.

"dependencies": {
"@angular/animations": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"@types/plotly.js": "^1.38.5",
"angular-plotly.js": "^0.1.14",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"csvtojson": "^2.0.8",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"lodash": "^4.17.10",
"plotly.js": "^1.39.4",
"primeicons": "^1.0.0-beta.10",
"primeng": "^6.1.1",
"rxjs": "^5.5.6",
"ya-csv": "^0.10.1",
"zone.js": "^0.8.19"
}

"styles": [
"../node_modules/primeng/resources/themes/nova-light/theme.css",
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/primeng/resources/themes/bootstrap/theme.css",
"../node_modules/primeng/resources/primeng.css",
"../node_modules/font-awesome/css/font-awesome.css",
"styles.css",
"../node_modules/primeicons/resources/primeicons.css"
]

In our project, we are having the same problem and our config is practically the same

[FilipLaurentiu]

Hi even though I have included the primeicons, its not working with angular 5.2.0 version, here is the configuration we have in our project. can someone throw light on this.
"dependencies": {
"@angular/animations": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"@types/plotly.js": "^1.38.5",
"angular-plotly.js": "^0.1.14",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"csvtojson": "^2.0.8",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"lodash": "^4.17.10",
"plotly.js": "^1.39.4",
"primeicons": "^1.0.0-beta.10",
"primeng": "^6.1.1",
"rxjs": "^5.5.6",
"ya-csv": "^0.10.1",
"zone.js": "^0.8.19"
}
"styles": [
"../node_modules/primeng/resources/themes/nova-light/theme.css",
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/primeng/resources/themes/bootstrap/theme.css",
"../node_modules/primeng/resources/primeng.css",
"../node_modules/font-awesome/css/font-awesome.css",
"styles.css",
"../node_modules/primeicons/resources/primeicons.css"
]

In our project, we are having the same problem and our config is practically the same

Same problem for me. Have you find a solution ?

[umangsavaliya]

Try to directly add css in index.html

link rel="stylesheet" type="text/css" href="/node_modules/primeicons/primeicons.css"
link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/omega/theme.css"
link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css"

[rukshandangalla]

Having the same issue! Anyone with a solution, much appreciated!

[giuseppesalvio]

hi i think it's late but is it possible that you write
something like this : collapseIcon="pi-angle-up"
it's wrong try to write : collapseIcon="pi pi-angle-up"

[amankhale]

I'm having problem with one icon, that is "pi pi-flag". It's not working. All the other icons are working fine, but only this one has a bug.