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