Page 1 of 2
prime icons does not work
Posted: 19 Jun 2018, 23:27
by silvanomatta
I have serenity template and the prime icons are not working.
An example of this is the close button of the dialog that does not appear.
following the documentation, I'm using
and nothing works
I'm using the packages
"primeicons": "^1.0.0-beta.8",
"primeng": "^6.0.0-rc.1",
Thank you
Re: prime icons does not work
Posted: 20 Jun 2018, 17:25
by Ctrl-C
Did you include node_modules/primeicons/primeicons.css?
Re: prime icons does not work
Posted: 20 Jun 2018, 22:14
by silvanomatta
Ctrl-C wrote: ↑20 Jun 2018, 17:25
Did you include node_modules/primeicons/primeicons.css?
My God, I totally forgot to put it on angular.json.
Thanks for the help. \o
Re: prime icons does not work
Posted: 22 Jun 2018, 19:35
by sshanmugam
i have the same problem. i recently upgraded to V6 and i am using dropdown, the down arrow is not showing up in the right side of the dropdown to pull the drop down list.
Package.json:
"primeicons": "^1.0.0-beta.9",
"primeng": "^6.0.0",
Angular.json:
"styles": [
"node_modules/font-awesome/css/font-awesome.min.css",
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/omega/theme.css",
"node_modules/primeng/resources/primeng.min.css",
Re: prime icons does not work
Posted: 14 Sep 2018, 14:22
by sourav_patra
Same for me. I rather found a bug in the styling feature. The primeicon classes are available (pi) but they are not added to the concerned elements
Re: prime icons does not work
Posted: 14 Sep 2018, 14:44
by sudheer
I used PrimeIcons in primeng-extensions and they worked well. Anyway later replaced with old font-awesome icons because some of the required icons still need to be added to PrimeIcons.
Both of them need to be used as
Code: Select all
class="pi pi-xxx" or class="fa fa-xxx"
Re: prime icons does not work
Posted: 17 Sep 2018, 21:16
by raghanag
HI I am facing similar issue, here is my package.json, i even added the primeicons and the css to the .angular-cli.json, but still the drop down's caret-down icon is not showing up. I think some of my depenedencies are messing with the primeng icons, can someone throw some light on it. Thanks.
"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",
"primeng": "^6.1.1",
"rxjs": "^5.5.6",
"ya-csv": "^0.10.1",
"zone.js": "^0.8.19"
}
Re: prime icons does not work
Posted: 17 Sep 2018, 22:04
by troyski
I had this problem (the "caret" or "down arrow" not showing up).
In one environment it was working while in another it was not. Both had these same package versions installed:
"primeicons": "^1.0.0-beta.10",
"primeng": "^6.1.3",
I finally realized the difference: I had installed the Font Awsome Free package (has more icons than the smaller default package. I had subsequently dereferenced the default Font Awesome package in the "styles" section of the angular.json file, replacing it with a reference to the entire free package. So, I replaced this:
"node_modules/font-awesome/css/font-awesome.min.css"
with this:
"node_modules/@fortawesome/fontawesome-free/css/all.min.css"
But, apparently the primeng multiselect component (among others, I'd presume) is still somehow partially dependent on something in that existing Font Awesome package. In the end, I fixed it by referencing both packages. My styles section now looks like this:
"styles": [
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/primeng.min.css",
"node_modules/font-awesome/css/font-awesome.min.css",
"node_modules/@fortawesome/fontawesome-free/css/all.min.css",
"src/styles.css"
],
The primeicons caret is now rendering again.
Re: prime icons does not work
Posted: 16 Feb 2019, 02:29
by Sparks260
I, too, am having a problem with the PrimeIcons in my Angular 7 project. I have followed the steps for installing primeicons:
package.json:
Code: Select all
"dependencies": {
"@angular/animations": "^7.2.0",
"@angular/cdk": "^7.2.1",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"chart.js": "^2.7.3",
"core-js": "^2.5.4",
"primeicons": "^1.0.0",
"primeng": "^7.0.4",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
Code: Select all
"styles": [
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-colored/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"src/styles.scss"
],
It appears that Angular is picking up the primeicons, because I see this in Elements in developer tools in Chrome:
Code: Select all
<app-root ng-version="7.2.0">
<div>
<span class="pi pi-chevron-right" style="font-size: 3em"></span>
</div>
<router-outlet></router-outlet>
And I see the style definitions for both
Code: Select all
.pi {
font-family: 'primeicons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
display: inline-block;
-webkit-font-smoothing: antialiased;
}
and
Code: Select all
.pi-chevron-right:before { content: "\e901"; }
in the Styles window of the Dev Tools.
But for some reason, I don't see the icon displayed on the web page - all I see is a square box.
Any ideas?
Re: prime icons does not work
Posted: 16 Feb 2019, 03:10
by Sparks260
Continuing from my previous post, I just noticed that I am getting an error in the console saying
But I am not sure how to resolve this error.
Still looking for ideas...