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

score 16 · Answer 1 · answered Oct 10 '18 at 03:27

16

Try adding an import in style.css file

@import '~primeicons/primeicons.css';

answered Oct 10 '18 at 03:27

Abhinav Kumar

2,883
1
17
30

Amazing that they don't mention this in their documentation! ‍♂️ – AsGoodAsItGets Apr 28 '22 at 09:50
100% works, This is Amazing. – Jiya Dec 30 '22 at 11:03
This is insane ! It took me hours to figure this out. Even ChatGpt didn't gave me this answer! Thanks man <3 – Tarik Waleed Mar 12 '23 at 09:41
chatGPT will surely not solve all the problems, sometime software engineering is full of tricks. ha ha :) – Abhinav Kumar Mar 13 '23 at 09:13

score 11 · Accepted Answer · answered Oct 10 '18 at 04:17

11

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

answered Oct 10 '18 at 04:17

Suresh Kumar Ariya

9,516
1
18
27

Restart the app after adding this configurations to angular.json – MOHAMMAD WASEEM May 27 '20 at 23:26
Not to forget: npm install primeicons – Vitaly Sazanovich May 25 '23 at 21:54

score 1 · Answer 3 · answered Mar 29 '21 at 08:42

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

score 1 · Answer 4 · answered May 07 '21 at 15:16

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

score 1 · Answer 5 · answered May 25 '21 at 04:00

1

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

answered May 25 '21 at 04:00

Victor Jimenez

598
3
6

score 0 · Answer 6 · edited Aug 14 '20 at 00:28

0

change span font family in style.css to

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

edited Aug 14 '20 at 00:28

JulienD

7,102
9
50
84

answered Aug 12 '20 at 15:44

Magdy Elsayyad

249
3
5

It should .pi not a span. – Nejat Njono Jun 21 '23 at 16:36
.pi { font-family:'primeicons' !important } – Nejat Njono Jun 21 '23 at 16:37

score 0 · Answer 7 · answered May 17 '21 at 05:26

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.

score 0 · Answer 8 · answered Apr 20 '22 at 18:29

0

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

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

answered Apr 20 '22 at 18:29

Michael

192
1
5

PrimeNg Icons Not Showing (Checkbox and Select)

8 Answers8

Linked