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?