如何替换Angular PrimeNG Panel的展开/收起控制图标？

下面提供两种实用方法替换原生的加减图标为Chevron Up/Chevron Down：

方法一：CSS覆盖默认图标 #

PrimeNG的Panel切换图标通过伪元素渲染，直接用CSS替换对应状态的图标内容即可：

/* 未展开状态显示Chevron Down */
.p-panel:not(.p-panel-expanded) .p-panel-header-icon .p-panel-toggle-icon:before {
  content: "\e909"; /* PrimeIcons的chevron-down编码 */
}

/* 展开状态显示Chevron Up */
.p-panel.p-panel-expanded .p-panel-header-icon .p-panel-toggle-icon:before {
  content: "\e908"; /* PrimeIcons的chevron-up编码 */
}

注意：确保项目已引入PrimeIcons字体，否则图标无法正常显示。

方法二：自定义头部模板完全替换切换按钮 #

利用Panel的p-header模板自定义头部，手动绑定展开状态和图标，灵活性更高：

组件模板代码 #

<p-panel [(expanded)]="panelExpanded">
  <ng-template pTemplate="header">
    <div class="flex justify-content-between align-items-center">
      <span>自定义面板标题</span>
      <button type="button" pButton pRipple 
              (click)="panelExpanded = !panelExpanded"
              class="p-panel-header-icon p-link"
              icon="{{panelExpanded ? 'pi pi-chevron-up' : 'pi pi-chevron-down'}}">
      </button>
    </div>
  </ng-template>
  <!-- 面板内容 -->
  <div>这里是面板的内容区域</div>
</p-panel>

组件类代码 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-custom-panel',
  templateUrl: './custom-panel.component.html'
})
export class CustomPanelComponent {
  panelExpanded: boolean = false;
}

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