Mat expansion panel禁用时toggle图标消失，如何保留图标仅禁用功能？

原因说明 #

Angular Material 对mat-expansion-panel的默认逻辑为：组件处于disabled状态时会强制隐藏toggle展开图标，该逻辑优先级高于hideToggle配置项，因此直接设置hideToggle="false"不会生效。

方案1：CSS强制显示图标（实现成本最低） #

保留原有的[disabled]绑定逻辑，通过CSS强制覆盖默认隐藏规则即可：

1. 给mat-expansion-panel添加自定义类名

<mat-expansion-panel [disabled]="isOnPageTwo" hideToggle="false" class="keep-toggle-when-disabled">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Self aware panel
      </mat-panel-title>
    </mat-expansion-panel-header>
    <p>I'm visible because I am open</p>
  </mat-expansion-panel>

2. 添加对应的CSS规则
   如果规则写在全局样式文件styles.css中：

.keep-toggle-when-disabled .mat-expansion-indicator {
  display: block !important;
  opacity: 0.5 !important; /* 可自定义透明度标识禁用状态 */
}

如果规则写在组件私有样式文件中，需添加::ng-deep前缀取消视图封装：

::ng-deep .keep-toggle-when-disabled .mat-expansion-indicator {
  display: block !important;
  opacity: 0.5 !important;
}

方案2：自定义禁用逻辑（无需样式穿透） #

不使用组件自带的disabled属性，手动控制交互禁用状态，自然保留toggle图标展示：

<mat-expansion-panel hideToggle="false" [class.panel-disabled]="isOnPageTwo">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Self aware panel
      </mat-panel-title>
    </mat-expansion-panel-header>
    <p>I'm visible because I am open</p>
</mat-expansion-panel>

添加样式直接禁用头部交互即可：

.panel-disabled .mat-expansion-panel-header {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

注意事项 #

• 若使用Angular Material v15+的MDC重构版本，展开图标的CSS类名需调整为.mat-expansion-panel-header-indicator
• 可根据业务需求自定义禁用状态的图标、文字样式，优化用户感知

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