PrimeNG 17中如何修改SplitButton的下拉图标？

方法一：使用官方dropdownIcon属性 #

PrimeNG 17的SplitButton提供了专门控制下拉按钮图标的dropdownIcon属性，直接在组件上添加该属性并指定图标类即可：

<p-splitButton label="操作" [model]="menuItems" dropdownIcon="pi pi-chevron-up"></p-splitButton>

• 示例用的是PrimeNG内置的pi pi-chevron-up图标，你可以替换成任意PrimeNG图标类（比如pi pi-arrow-right），或者自定义的图标类。

方法二：CSS自定义覆盖 #

如果dropdownIcon属性无法满足个性化需求，可通过CSS直接修改下拉按钮图标：

/* 隐藏默认下拉图标 */
.p-splitbutton .p-button:last-child .p-button-icon {
    display: none;
}

/* 用伪元素添加自定义图标（以Font Awesome为例） */
.p-splitbutton .p-button:last-child::after {
    content: "\f0d7";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.8rem;
}

如果用自定义SVG或图片，可改用背景图实现：

.p-splitbutton .p-button:last-child {
    position: relative;
}
.p-splitbutton .p-button:last-child .p-button-icon {
    display: none;
}
.p-splitbutton .p-button:last-child::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background-image: url('你的图标路径');
    background-size: cover;
}

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