prime icons does not work

Sparks260 · 17 Feb 2019, 02:30

So I finally tracked down why this was not working for me. It was related to the fact that I am running my Angular app inside an existing ASP.NET MVC app.

How I got it to work was to add the entry "~/node_modules/primeicons/primeicons.css" to my ASP.NET BundleConfig.cs file in the StyleBundle that I had for other .css files. This StyleBundle is referenced in the <HEAD> section of my HTML file (the _Layout.cshtml used by MVC) so all of the CSS gets loaded early during page rendering, and not at the bottom when the JS files get loaded (including the Styles.js file). By loading the PrimeIcons in the HEAD section of the HTML, the Font paths were correctly resolved and the fonts are now loading correctly on the page.

I have another Angular-only application using PrimeNG, and the PrimeIcons work perfectly fine following the PrimeNG Docs instructions and putting the PrimeIcons.css file in the Styles array of the angular.json.

So I believe that something about the interaction between ASP.NET MVC and Angular, and because the PrimeIcons.css file references other files using a relative path (the Font files), caused it to not work in the standard Angular build portion of my integrated app. The other Angular/PrimeNG css files (Nova theme, primeng.min.css, and the local styles.css) work fine, I suspect because they aren't referencing other files internally like the PrimeIcons does.

mchapilliquens · 19 Feb 2019, 08:36

Sparks260 wrote: ↑

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:

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"
  },

angular.json:

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?

Tenía el mismo problema tuyo. Logré que se muestren los íconos instalando: npm install --save font-awesome
Además lo agregué al archivo angular.js
"styles": [
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-colored/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"node_modules/font-awesome/css/font-awesome.min.css",
"node_modules/fullcalendar/dist/fullcalendar.min.css",
"src/styles.css"
],
Espero te sirva.

Sparks260 · 19 Feb 2019, 20:00

Tenía el mismo problema tuyo. Logré que se muestren los íconos instalando: npm install --save font-awesome
Además lo agregué al archivo angular.js
"styles": [
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-colored/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"node_modules/font-awesome/css/font-awesome.min.css",
"node_modules/fullcalendar/dist/fullcalendar.min.css",
"src/styles.css"
],
Espero te sirva.

Thanks, but I got it to work with the PrimeIcons. I can't read all of what you wrote because I don't speak the language, but it looks like you are recommending adding Font Awesome.

It appears that PrimeNG used Font Awesome in some previous versions, but their newer version uses their own PrimeIcons.

Also, the real reason this wasn't working was due to an interaction with Angular 7 being hosted in an ASP.NET MVC application and the internal references to Font files inside their PrimeIcons.css. Please see my previous reply where I explain in detail how I got it to work in my situation. I created a sample Angular-only app with PrimeNG and it worked fine using their documentation to add the PrimeIcons.

Thank you for taking the time to reply.

adsasikumar53 · 10 Nov 2020, 16:56

This is because the primeicons.css has relative path to the icons (ttf & woff files) like "./fonts/primeicons.ttf".

So when the primeicons.css is loaded, the path becomes localhost:4200/fonts/primeicons.ttf

I know this is the issue but not sure how to fix this. I tried giving the path like how it will look once the application is deployed but got error while compiling as the path couldn't be resolved.

nBytes · 03 Feb 2021, 16:17

Solved it.

In my case, the angular.json included a styles section like so:

Code: Select all

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

With this angular.json, the Browser picked up the primeicons.css (or rather, the styles therein were incorporated into styles.css) but all WOFFs and TTFs gave a 404 Error.

Fix was: prepend "node_modules" with ./ This somehow fixes the resolution and the resources are found under the same adress that before threw a 404.

Code: Select all

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

works

kamil · 10 Feb 2021, 15:17

Great and thank you @nBytes, it's working with './...'

Btw. PrimeNG premium templates (omega) are using this way:

my-project/angular.json

Code: Select all

"styles": [
	"src/styles.scss"
],

my-project/src/styles.scss

Code: Select all

@import "../node_modules/primeng/resources/primeng.min.css";
@import "../node_modules/primeflex/primeflex.scss";
@import "../node_modules/primeicons/primeicons.css";
...

prime icons does not work

Who is online