prime icons does not work

UI Components for Angular
Posts: 10
Joined: 21 Jan 2017, 11:58

19 Jun 2018, 23:27

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

Code: Select all

<i class = "pi pi-check"> </ i> 
and nothing works

I'm using the packages

"primeicons": "^1.0.0-beta.8",
"primeng": "^6.0.0-rc.1",

Thank you

User avatar
Posts: 95
Joined: 29 Sep 2016, 04:21

20 Jun 2018, 17:25

Did you include node_modules/primeicons/primeicons.css?

Posts: 10
Joined: 21 Jan 2017, 11:58

20 Jun 2018, 22:14

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

Posts: 4
Joined: 05 Jan 2017, 23:36

22 Jun 2018, 19:35

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.


"primeicons": "^1.0.0-beta.9",
"primeng": "^6.0.0",


"styles": [

Posts: 4
Joined: 12 Apr 2018, 14:32

14 Sep 2018, 14:22

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

User avatar
PrimeFaces Core Developer
Posts: 4344
Joined: 16 Oct 2011, 19:19
Location: Singapore

14 Sep 2018, 14:44

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"

Sudheer Jonna

Posts: 1
Joined: 17 Sep 2018, 21:13

17 Sep 2018, 21:16

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"

Posts: 1
Joined: 24 Aug 2018, 18:37

17 Sep 2018, 22:04

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:
with this:

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

The primeicons caret is now rendering again.

Posts: 7
Joined: 18 May 2017, 03:40

16 Feb 2019, 02:29

I, too, am having a problem with the PrimeIcons in my Angular 7 project. I have followed the steps for installing primeicons:


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": [
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">
    <span class="pi pi-chevron-right" style="font-size: 3em"></span>
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;

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?

Posts: 7
Joined: 18 May 2017, 03:40

16 Feb 2019, 03:10

Continuing from my previous post, I just noticed that I am getting an error in the console saying
GET http://localhost:49150/primeicons.ttf net::ERR_ABORTED 404 (Not Found)
But I am not sure how to resolve this error.

Still looking for ideas...

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 0 guests