'PrimeNg Icons Not Showing (Checkbox and Select)

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;
}

angular primeng

Solution 1:^[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"
]

Solution 2:^[2]

Try adding an import in style.css file

@import '~primeicons/primeicons.css';

Solution 3:^[3]

change span font family in style.css to

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

Solution 4:^[4]

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;
}

Solution 5:^[5]

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";

Solution 6:^[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.

Solution 7:^[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";

Solution 8:^[8]

As documented in primeng: In app.module.ts add "ButtonModule" under imports, could look like this:

...  imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
HttpClientModule,
TableModule,
ButtonModule],

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Suresh Kumar Ariya
Solution 2	Abhinav Kumar
Solution 3	JulienD
Solution 4	Jason
Solution 5	Joel Stevick
Solution 6	Dipak
Solution 7	Victor Jimenez
Solution 8	Michael

'PrimeNg Icons Not Showing (Checkbox and Select)

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]