如何将mat-icon移至Angular Material展开面板标题左侧？

Angular Material的mat-expansion-panel-header默认采用flex布局，且标题区域有固定排列规则，直接在标题前插入图标会被默认样式推到右侧。你可以通过以下组件内CSS调整实现需求：

方法一：使用样式穿透修改默认布局 #

在组件的CSS文件中添加以下代码：

::ng-deep .mat-expansion-panel-header {
  justify-content: flex-start;
}

::ng-deep .mat-expansion-panel-header mat-icon {
  margin-right: 16px; /* 控制图标和标题的间距 */
  order: -1; /* 将图标调整到标题前方 */
}

方法二：自定义标题容器（更推荐，避免全局样式污染） #

先修改模板结构，把图标和标题放入自定义容器：

<mat-expansion-panel-header>
  <div class="header-content">
    <mat-icon>account_circle</mat-icon>
    <mat-panel-title> Personal data </mat-panel-title>
  </div>
</mat-expansion-panel-header>

再在组件CSS中添加样式：

.header-content {
  display: flex;
  align-items: center;
  flex: 1;
}

.header-content mat-icon {
  margin-right: 16px;
}

以上两种方式都能让图标稳定显示在标题左侧，且不会影响其他组件的样式。

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