angulariisangular-cliprimengprimeicons

Angular PrimeIcons work locally but not on IIS


I'm using primeicons and primeng in my angular app.

If I'm running the angular website/app locally, everything is fine.

But deploying to an IIS server, the icons are not shown - but all other styles are running well.

Is this something in the configuration of the IIS?

Usage in code:

<i class="pi pi-exclamation-circle">

styles in the angular.json:

"styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/primeicons/primeicons.css",
              "node_modules/primeng/resources/themes/nova-light/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/primeflex/primeflex.css",
              "src/styles.less"                            
            ],

dependencies in the package.json:

"dependencies": {
    "@angular/animations": "^9.1.12",
    "@angular/cdk": "^9.2.4",
    "@angular/common": "^9.1.12",
    "@angular/compiler": "^9.1.12",
    "@angular/core": "^9.1.12",
    "@angular/forms": "^9.1.12",
    "@angular/material": "^9.2.4",
    "@angular/platform-browser": "^9.1.12",
    "@angular/platform-browser-dynamic": "^9.1.12",
    "@angular/router": "^9.1.12",
    "angular2-jwt": "^0.2.3",
    "bootstrap": "^4.5.2",
    "chart.js": "^2.9.3",
    "moment": "^2.27.0",
    "primeflex": "^1.3.1",
    "primeicons": "^3.0.0",
    "primeng": "^9.1.3",
    "rxjs": "~6.5.4",
    "tslib": "^1.13.0",
    "zone.js": "~0.10.2"
  },

Solution

  • The solution was to add an exception for woff and ttf files in the web.config:

    <?xml version="1.0" encoding="utf-8"?>
      <configuration>
        <system.webServer>
          <rewrite>
            <rules>
              <rule name="SPA" stopProcessing="true">
                <match url="^(?!.*(\.js|\.css|\.png|\.jpg|\.ico|\.svg|\.ttf|\.woff|\.eot)).*$" />
                <conditions logicalGrouping="MatchAll" />
                <action type="Rewrite" url="/"  appendQueryString="true" />
              </rule>
            </rules>
          </rewrite>
        </system.webServer>
      </configuration>