PrimeNg Icons Not Showing (Checkbox and Select)

Question

Checked box and select sans icons.

I've added the primeicons library per: https://github.com/primefaces/primeng/wiki/Migration-Guide

However, something is still a muck, I can't get the icons with show up.

package.json:

...
"primeicons": "^1.0.0-beta.10",
"primeng": "6.1.2",

also have, not sure if relevant. Doesn't seem like it's overwriting the css but possible

"font-awesome": "4.7.0",
"@angular/material": "^6.4.7",

html:

<p-checkbox binary="true" label="Match Note"></p-checkbox>

html showing icon class - from dev tools:

<span class="ui-chkbox-icon ui-clickable pi pi-check" ng-reflect-klass="ui-chkbox-icon ui-clickable" ng-reflect-ng-class="[object Object]"></span>

css - from dev tools:

.ui-chkbox .ui-chkbox-icon {
    display: block;
}
<style>…</style>
.ui-widget, .ui-widget * {
    box-sizing: border-box;
}
<style>…</style>
*, *::before, *::after {
    box-sizing: border-box;
}
<style>…</style>
.ui-chkbox .ui-chkbox-box {
    width: 1.125em;
    height: 1.125em;
    line-height: 1.125em;
    border-radius: 2px;
    text-align: center;
}
<style>…</style>
.ui-chkbox-box.ui-state-active, .ui-radiobutton-box.ui-state-active {
    border: 1px solid #156090;
    background: #186ba0;
    color: #FFFFFF;
}
<style>…</style>
.ui-state-active {
    border-color: #bebebe;
    background-color: #d6d6d6;
    color: #212121;
}
<style>…</style>
.ui-state-default {
    border: 1px solid #d6d6d6;
    background-color: #ffffff;
    color: #555555;
}
<style>…</style>
.ui-widget {
    /* font-family: "Roboto", "Trebuchet MS", Arial, Helvetica, sans-serif; */
    font-size: 1em;
}
<style>…</style>
.ui-chkbox {
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
    margin-right: .25em;
    -ms-user-select: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}
<style>…</style>
.ui-widget {
    /* font-family: "Roboto", "Trebuchet MS", Arial, Helvetica, sans-serif; */
    font-size: 1em;
}
<style>…</style>
.mat-card {
    background: white;
    color: rgba(0, 0, 0, 0.87);
}
<style>…</style>
.mat-card {
    /* font-family: Roboto,"Helvetica Neue",sans-serif; */
}
Style Attribute {
    visibility: visible;
}
<style>…</style>
.mat-expansion-panel {
    background: white;
    color: rgba(0, 0, 0, 0.87);
}
<style>…</style>
.mat-expansion-panel {
    background: #fff;
    color: rgba(0,0,0,.87);
}
<style>…</style>
body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
}
<style>…</style>
body {
    margin: 0;
    /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
    i": ;
    */: ;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}
<style>…</style>
html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
<style>…</style>
body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
}
<style>…</style>
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    i": ;
    */i": ;
    */: ;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}
<style>…</style>
html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
<style>…</style>
body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
}
<style>…</style>
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    i": ;
    */: ;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}

Answer 1

You can also include primeng.css, theme and primengicons under 'styles' section in angular.json.

"styles": [
     "../node_modules/primeng/resources/primeng.min.css",
     "../node_modules/primeng/resources/themes/nova-light/theme.css",
     "../node_modules/primeicons/primeicons.css"
]

Answer 2

尝试在 style.css 文件中添加导入

@import '~primeicons/primeicons.css';

Answer 3

change span font family in style.css to

span{
    font-family:'primeicons' !important
}

Answer 4

If you are still not able to see the icons and styling after applying the suggestions in the accepted answer, try adding the css entries into your styles.scss file, that is what it took in my case.

@import  "~primeicons/primeicons.css";
@import  "~primeng/resources/themes/saga-blue/theme.css";
@import  "~primeng/resources/primeng.min.css";
@import  "~primeflex/primeflex.css";

Answer 5

This might not be directly relevant, but I was trying to solve a similar problem with Search and placing a search icon within the text input.

The problem for me was z-index; the icon was there, but it was hidden behind the search input box!!

So setting the icon's z-index via CSS solved the issue (in my case, to 1).

.pi .pi-search {
z-index: 1;
}

Answer 6

In case someone still facing this issue, do check webpack loader config.

For me the issue was related to webpack loader:

After updating my code of webpack module loader from :

            {
                test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
                use: ["url-loader", "file-loader"]
            }

to:

            {
                test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                loader: 'url-loader'
            },
            {
                test: /\.(ico|jpe?g|png|gif|webp|svg|mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
                loader: "file-loader"
            }

Icons started loading properly.

Answer 7

You have to add DropdownModule and this one CheckboxModule and then this section to your styles.css file.

@import "~primeicons/primeicons.css";
@import "~primeng/resources/themes/saga-blue/theme.css";
@import "~primeng/resources/primeng.min.css";