Changing component icons

[rhys]

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]

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]

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]

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'