Page 1 of 1
Changing component icons
Posted: 06 Nov 2018, 22:20
by 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!
Re: Changing component icons
Posted: 09 Nov 2018, 18:04
by 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.
Re: Changing component icons
Posted: 22 Nov 2018, 08:54
by 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.
Re: Changing component icons
Posted: 22 Nov 2018, 10:21
by 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'