Change Default Checked Icon of PrimeNG Checkbox via Global Styles

I am updating Angular from version 15 to 17. Therefore I also need to update primeNG.

I am having trouble to change the default checked icon of the checkbox.

Changing the Icon either per icon template or per the new property checkboxIcon is not an option for me, as I would need to change my html templates everywhere I use <p-checkbox> - does not seem elegant to me.

Before, I could change the icon in one global css file via the content property and the pseudo selector ::before. Something like

.p-checkbox-box.p-highlight .p-checkbox-icon::before {
  content: '\e90b';
  font-family: 'primeicons' !important;
  font-size: 18px;
}

So I would like to change the icon this way.

Find a minimal Angular/PrimeNG Setup here.

You can use the below CSS

Added white color to icon for good contrast ratio

global-styles.scss

.p-checkbox-box.p-highlight .p-element.p-icon-wrapper::before {
  content: '\e90b';
  font-family: 'primeicons' !important;
  font-size: 18px;
  color: white;
}

.p-checkbox-box.p-highlight .p-element.p-icon-wrapper svg {
  display: none;
}

Stackblitz Demo

If you want to put in component.ts you need to use ::ng-deep

::ng-deep .p-checkbox-box.p-highlight .p-element.p-icon-wrapper::before {
  content: '\e90b';
  font-family: 'primeicons' !important;
  font-size: 18px;
  color: white;
}

::ng-deep .p-checkbox-box.p-highlight .p-element.p-icon-wrapper svg {
  display: none;
}