嘿，这个需求我帮很多人解决过，给你两种实用的实现方式，看你更适合哪种：

如果你的项目只是想替换图标样式，不需要改动逻辑，用CSS覆盖是最省事的。PrimeNG Tree的展开/折叠按钮有明确的状态类，我们可以隐藏默认图标，用伪元素添加加号和减号：

针对Prime Icons（新版PrimeNG默认）的代码： #

/* 隐藏默认的折叠/展开图标 */
.p-tree .pi-caret-right,
.p-tree .pi-caret-down {
    display: none;
}

/* 未展开状态显示加号 */
.p-tree .p-treenode-toggler:not(.p-tree-toggler-active)::before {
    content: "+";
    font-weight: bold;
    margin-right: 4px;
    font-size: inherit;
}

/* 已展开状态显示减号 */
.p-tree .p-treenode-toggler.p-tree-toggler-active::before {
    content: "-";
    font-weight: bold;
    margin-right: 4px;
    font-size: inherit;
}

针对Font Awesome（旧版本PrimeNG）的代码： #

如果你用的是旧版PrimeNG，图标用的是Font Awesome的fa-caret-down/fa-caret-right，把选择器替换成对应的类就行：

/* 隐藏Font Awesome默认图标 */
.p-tree .fa-caret-right,
.p-tree .fa-caret-down {
    display: none;
}

.p-tree .p-treenode-toggler:not(.p-tree-toggler-active)::before {
    content: "+";
    font-weight: bold;
}

.p-tree .p-treenode-toggler.p-tree-toggler-active::before {
    content: "-";
    font-weight: bold;
}

如果你需要对按钮做更多自定义（比如加样式、绑定额外事件），可以用PrimeNG Tree的模板功能，直接重写节点的展开/折叠按钮：

模板代码： #

<p-tree [value]="treeData">
    <ng-template pTemplate="default" let-node>
        <!-- 自定义展开/折叠按钮 -->
        <button 
            *ngIf="node.children" 
            class="p-treenode-toggler custom-toggler"
            (click)="toggleNode($event, node)"
        >
            {{ node.expanded ? '-' : '+' }}
        </button>
        <!-- 节点文本 -->
        <span class="p-treenode-label">{{ node.label }}</span>
    </ng-template>
</p-tree>

组件类代码： #

需要加一个方法来控制节点的展开/折叠状态：

toggleNode(event: MouseEvent, node: any) {
    // 阻止事件冒泡，避免触发节点的默认点击行为
    event.stopPropagation();
    node.expanded = !node.expanded;
}

自定义按钮样式： #

给按钮加一点样式，让它和默认的对齐方式一致：

.custom-toggler {
    background: transparent;
    border: none;
    cursor: pointer;
    font-weight: bold;
    margin-right: 8px;
    padding: 0;
    line-height: 1;
}

两种方法各有优劣：方法一适合快速替换，零代码改动；方法二更灵活，能满足更多定制化需求。你可以根据自己的项目情况选择~

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