Changing component icons

Post Reply
rhys
Posts: 3
Joined: 15 Oct 2018, 19:38

06 Nov 2018, 22:20

Hi,

I need to make swap out icons in various components. Can you please advise the recommended way to override icons (both prime icons and external)?

Some of the components I'm hoping to change the icons for:
- checkbox
- sidebar close
- panelmenu

Thanks!

rhys
Posts: 3
Joined: 15 Oct 2018, 19:38

09 Nov 2018, 18:04

Follow up question since this has gone 3 days without a reply: is this the best place to get support for current Prime Designer Extended Licence holders? This is the first time I've needed support since obtaining a licence.

cagatay.civici
Prime
Posts: 18075
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

22 Nov 2018, 08:54

Sorry for the delay, there is a reorg going on this week in our support team so caused this delay. We'll assist shortly.

merve7
Posts: 465
Joined: 12 Sep 2017, 10:44

22 Nov 2018, 10:21

Hi,
You can override icons by the below steps;
1. add the package and version you want to in package.json file.
2. add css file of this package in angular.json file. like;

Code: Select all

              "styles": [
                "node_modules/primeng/resources/primeng.min.css",
                "node_modules/primeicons/primeicons.css",
                "node_modules/font-awesome/css/font-awesome.min.css",
                //other style files
              ],
3. create a @mixin in your stylesheet (stylesheet.scss or _mixin.scss) like the following code;

Code: Select all

@mixin icon-override_fa($icon) {
    background: none;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-indent: 0px !important;
    text-align: center;
    &:before {
        content: $icon;
    }
}
or

Code: Select all

@mixin icon-override_pi($icon) {
    background: none !important;
    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;
    -moz-osx-font-smoothing: grayscale;
    text-indent: 0px !important;
    text-align: center;

    &:before {
        content: $icon;
    }
}
4.add code like the following code to where you want to override the code;
For Fontawesome

Code: Select all

    .ui-chkbox {
        .ui-chkbox-box {
            .ui-chkbox-icon {
            	@include icon_override_fa("\f0d7");
            }
        }
    }
or for PrimeIcons

Code: Select all

    .ui-chkbox {
        .ui-chkbox-box {
            .ui-chkbox-icon {
            	@include icon-override_pi("\e90f");
            }
        }
    }
5. Lastly regenerate your css files with 'sass -s src/assets --sourcemap=none'

Post Reply

Return to “PrimeNG Theme Designer API”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 0 guests