如何通过全局样式修改PrimeNG复选框的默认选中图标？

PrimeNG 17对复选框的DOM结构做了调整，旧的CSS选择器不再匹配，你可以用以下全局CSS代码替换原有样式来实现需求：

.p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

关键说明： #

• 新增外层.p-checkbox选择器提升样式优先级，避免被组件内联样式覆盖
• 保留.p-checkbox-box.p-highlight定位处于选中状态的复选框容器
• 给.p-checkbox-icon添加flex布局，确保自定义图标居中显示（PrimeNG 17默认容器无此布局，直接替换content可能导致位置偏移）

将上述代码写入全局样式文件（如styles.scss）后，所有<p-checkbox>组件的选中图标会自动更新，无需修改任何模板文件。

内容的提问来源于stack exchange，提问作者neukoellnjenny