Square appears instead of icon

[x3igh7]

using packages:

"primeicons": "^1.0.0-beta.10",
"primeng": "^6.1.0-rc.1",

and angular.json:

"styles": [
              "src/styles.scss",
              "./node_modules/primeicons/primeicons.css",
              "./node_modules/primeng/resources/themes/omega/theme.css",
              "./node_modules/primeng/resources/primeng.min.css"
            ],

Instead of the icon I'm getting a square. Oddly it's not necessarily true for all icons; for example, the pi-check icon works fine, but the pi-power-off icon does not. The styles.scss is essentially empty so I am not overwriting any styles (#46).

[onursenture]

We couldn't replicate the issue and can you provide us a way to produce?

There is no issue on live showcases: http://primefaces.org/primeng/#/icons

[rjcpereira]

This happens when Bootstrap classes overwite the content CSS property of the :before. The modals have these classes: pi and pi-times, if the Bootstrap has some class that's applied to this element the content property gets the FontAwesome icon code by CSS, since the code of FA differs from the PI, it shows that square. You could check if this is the case by adding the fas class to the element, if the icon appears correctly, it's being overwritten by the FontAwesome

[x3igh7]

Sorry my PC died and I'm only getting set back up.

I'm having the same issue on my new PC, however. I don't have Bootstrap and I don't have FontAwesome. I'm in the early stages of my app and I don't have any suspect global classes that may be overwriting something.

Package.json

  "name": "ftwgl",
  "version": "0.0.1",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~6.1.10",
    "@angular/common": "~6.1.10",
    "@angular/compiler": "~6.1.10",
    "@angular/core": "~6.1.10",
    "@angular/forms": "~6.1.10",
    "@angular/http": "~6.1.10",
    "@angular/platform-browser": "~6.1.10",
    "@angular/platform-browser-dynamic": "~6.1.10",
    "@angular/router": "~6.1.10",
    "@auth0/angular-jwt": "~2.0.0",
    "@ngrx/effects": "~6.1.0",
    "@ngrx/entity": "~6.1.0",
    "@ngrx/store": "~6.1.0",
    "core-js": "~2.5.7",
    "ngrx-store-localstorage": "~5.1.0",
    "primeicons": "~1.0.0",
    "primeng": "~6.1.5",
    "primeflex": "~1.0.0-rc.1",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.10.3",
    "@angular/cli": "~6.2.6",
    "@angular/compiler-cli": "~6.1.10",
    "@angular/language-service": "~6.1.10",
    "@types/jasmine": "~2.8.9",
    "@types/jasminewd2": "~2.0.5",
    "@types/node": "~10.12.0",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~3.3.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.4",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "~1.4.0",
    "protractor": "~5.4.1",
    "ts-node": "~7.0.1",
    "tslint": "~5.11.0",
    "rxjs-tslint": "~0.1.5",
    "typescript": "~2.7.2"
  }
}

Angular.json

  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "ftwgl": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss",
          "spec": false
        },
        "@schematics/angular:class": {
          "spec": false
        },
        "@schematics/angular:directive": {
          "spec": false
        },
        "@schematics/angular:guard": {
          "spec": false
        },
        "@schematics/angular:module": {
          "spec": false
        },
        "@schematics/angular:pipe": {
          "spec": false
        },
        "@schematics/angular:service": {
          "spec": false
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/ftwgl",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss",
              "./node_modules/primeflex/primeflex.css",
              "./node_modules/primeicons/primeicons.css",
              "./node_modules/primeng/resources/themes/nova-colored/theme.css",
              "./node_modules/primeng/resources/primeng.min.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "ftwgl:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "ftwgl:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "ftwgl:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "ftwgl-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "ftwgl:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "ftwgl"
}

[StealthyDev]

How to fix this behavior @RicardoJCP ?

We use all - Bootstrap, FontAwesome, IonIcon, etc..

[gwoplock]

I'm having the same issue. just updated from angular 4.4.6 to angular 7.2.3. I've uninstalled font-awesome but I still get squares. I've tried both to include it from an .scss file and in the header like font-awesome was. neither seems to work.

[StealthyDev]

I think I changed the following in webpack:

{ test: /.css$/, loaders: ['raw-loader'] }

to

{ test: /.css$/, loaders: ['to-string-loader', 'css-loader'] }

[gwoplock]

I just got it to work on my page. I added { from: 'node_modules/primeicons/primeicons.css', to: "assets/primeicons/primeicon.css" }, { from: 'node_modules/primeicons/fonts', to: "assets/primeicons/fonts"} to my CopyWebpackPlugin and { rel: 'stylesheet', type: 'text/css', href: 'assets/primeicons/primeicon.css'}, to my config for HtmlElementsPlugin

[onursenture]

We checked the issue and couldn't replicate. But, we are thinking it's not about PrimeIcons. Could you send us an example project for replication?

[hemantshelar]

Hi, I am having the same issue. Here is the stackblitz link to sample application.

https://stackblitz.com/edit/hemant-primengicon-issue

[hemantshelar]

We checked the issue and couldn't replicate. But, we are thinking it's not about PrimeIcons. Could you send us an example project for replication?

Here is the stackblitz link

https://stackblitz.com/edit/hemant-primengicon-issue

[yigitfindikli]

Hi, @hemantshelar primeicons doesn't work in stackblitz. But i'm downloaded your sample code and it's working. Can you provide your real angular.json and package.json ?

[hemantshelar]

Hi, @hemantshelar primeicons doesn't work in stackblitz. But i'm downloaded your sample code and it's working. Can you provide your real angular.json and package.json ?

@yigitfindikli Thanks for your replay. For our PoC I was trying to set up sample application in stackblitz directly. It's working fine on my dev machine. May be issue to be raised with stackblitz :)

[yigitfindikli]

@hemantshelar Glad to hear :)

[mikegoodstadt]

I get the following errors in the browser console:

Chrome (for both TTF and WOF):

Failed to decode downloaded font: https://... (index):1 OTS parsing error: invalid version tag

Firefox (for both TTF and WOF):

downloadable font: rejected by sanitizer

Stackblitz rendering 'box' and CSS errors in full browser console: https://stackblitz.com/edit/angular-primeicons-err-ots-parsing

However it works when the path to primeicons CSS is hardcoded in index.html: https://stackblitz.com/edit/angular-primeicons-err-index-shim

Is this perhaps simply a CORS limitation of StackBlitz? (rather than actual errors in the font files...)

[x3igh7]

Came back to my project after a long time and went about updating all the packages to latest. The icon's package is now displaying icons properly!

My styles in angular.json:

            "styles": [
              "./node_modules/primeflex/primeflex.css",
              "./node_modules/primeicons/primeicons.css",
              "./node_modules/primeng/resources/primeng.min.css",
              "./node_modules/primeng/resources/themes/nova-colored/theme.css",
              "src/styles.scss"
            ],

and package versions:

"primeicons": "~2.0.0",
    "primeng": "~9.0.6",

[AlbaSS18]

I get the following errors in the browser console:

Chrome (for both TTF and WOF):

Failed to decode downloaded font: https://... (index):1 OTS parsing error: invalid version tag

Firefox (for both TTF and WOF):

downloadable font: rejected by sanitizer

Stackblitz rendering 'box' and CSS errors in full browser console: https://stackblitz.com/edit/angular-primeicons-err-ots-parsing

However it works when the path to primeicons CSS is hardcoded in index.html: https://stackblitz.com/edit/angular-primeicons-err-index-shim

Is this perhaps simply a CORS limitation of StackBlitz? (rather than actual errors in the font files...)

Hello, I'm having the same problems in my project. I'm using Angular 12, PrimeNG, PrimeIcon 5.0.0 and Webpack 5. Have you resolved it?

[pspkshah]

I get the following errors in the browser console: Chrome (for both TTF and WOF):

Failed to decode downloaded font: https://... (index):1 OTS parsing error: invalid version tag

Firefox (for both TTF and WOF):

downloadable font: rejected by sanitizer

Stackblitz rendering 'box' and CSS errors in full browser console: https://stackblitz.com/edit/angular-primeicons-err-ots-parsing However it works when the path to primeicons CSS is hardcoded in index.html: https://stackblitz.com/edit/angular-primeicons-err-index-shim Is this perhaps simply a CORS limitation of StackBlitz? (rather than actual errors in the font files...)

Hello, I'm having the same problems in my project. I'm using Angular 12, PrimeNG, PrimeIcon 5.0.0 and Webpack 5. Have you resolved it?

@x3igh7 Can you reopen this issue, this issue exist with primeicon version with latest angular, on local environment it works, but fails to decode with compiled version.

[ildelian]

I have the same problem. Angular: 13.1.0 PrimeNg: 13.2.0 primeicons: 5.0.0

Prime icons shows a white square instead the icon.

[bhensonweb]

I fixed this by removing a package which was interfering.

I was using vue-svg-loader package which interfered with the icons loading.

[johnwwk]

yes they don't work for me as well..react

[kandangit]

I had this issue , in my case it was the maven-war-plugin corrupting the .woff/.woff2 files. The browser was not able to read them.

I have commented e.g. removed the following lines and it works now (I have an EAR in which a WAR file with an Angular frontend using primeicons is included):

<configuration>
    <failOnMissingWebXml>false</failOnMissingWebXml>
    <useCache>true</useCache>
    <webResources>
        <resource>
            <filtering>true</filtering>
            <directory>src/main/webapp</directory>
            <includes>
                <include>**/**</include>
            </includes>
        </resource>
    </webResources>
</configuration>

In case it helps anyone although this issue can appear for a number of reasons. This wasn't, in my environment, a PrimeFace's issue.

[astropio3000]

i have added

.pi {
  font-family: "primeicons" !important;
}

to styles and it helped

[sibeltan]

In my case, removing interfering package url-loader fixed the issue.

[acunaFermin]

i have added

.pi {
  font-family: "primeicons" !important;
}

to styles and it helped

This solution do the trick!