Angular Material中mat-nav-list与Expansion Panel图标对齐问题

要解决mat-nav-list里Expansion控件图标和其他菜单项对齐不一致的问题，核心是让Expansion的头部布局和mat-list-item的图标布局规则保持一致，以下是几种实用方案：

方案1：复用mat-list-item的内置样式指令 #

直接给mat-expansion-header添加matListItem指令，同时给图标加上matListItemIcon，让它遵循mat-list-item的图标对齐规则：

<mat-nav-list>
  <!-- 普通菜单项 -->
  <mat-list-item>
    <mat-icon matListItemIcon>dashboard</mat-icon>
    <span matListItemTitle>仪表盘</span>
  </mat-list-item>
  
  <!-- 带Expansion的菜单项 -->
  <mat-list-item>
    <mat-expansion-panel>
      <mat-expansion-header matListItem>
        <mat-icon matListItemIcon>expand_more</mat-icon>
        <span matListItemTitle>展开菜单</span>
      </mat-expansion-header>
      <!-- 子菜单 -->
      <mat-nav-list>
        <mat-list-item>子菜单项1</mat-list-item>
        <mat-list-item>子菜单项2</mat-list-item>
      </mat-nav-list>
    </mat-expansion-panel>
  </mat-list-item>
</mat-nav-list>

这种方法利用Angular Material的内置指令统一样式，不需要额外写CSS，适配性最好。

方案2：自定义CSS调整内边距和布局 #

如果方案1不适用（比如版本兼容问题），可以通过自定义CSS手动对齐：

<mat-nav-list>
  <!-- 普通菜单项 -->
  <mat-list-item>
    <mat-icon matListItemIcon>settings</mat-icon>
    <span matListItemTitle>设置</span>
  </mat-list-item>
  
  <!-- 带Expansion的菜单项 -->
  <mat-list-item>
    <mat-expansion-panel>
      <mat-expansion-header class="aligned-expansion-header">
        <mat-icon>expand_more</mat-icon>
        <span>展开菜单</span>
      </mat-expansion-header>
      <!-- 子菜单 -->
      <mat-list>
        <mat-list-item>子菜单项A</mat-list-item>
      </mat-list>
    </mat-expansion-panel>
  </mat-list-item>
</mat-nav-list>

对应的CSS：

.aligned-expansion-header {
  /* 匹配mat-list-item的左侧内边距，根据你的Material版本调整数值 */
  padding-left: 16px;
  display: flex;
  align-items: center;
}

.aligned-expansion-header mat-icon {
  /* 匹配mat-list-item图标的右侧间距 */
  margin-right: 16px;
  /* 固定图标尺寸，和其他菜单图标保持一致 */
  width: 24px;
  height: 24px;
}

方案3：调整Expansion的容器结构 #

把mat-expansion-panel完全嵌套在mat-list-item内部，同时移除Expansion默认的边框和内边距，避免自带样式干扰列表布局：

mat-expansion-panel {
  box-shadow: none;
  border: none;
}

再配合方案1或2的图标对齐设置，就能实现整体布局统一。

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