Angular 16升17后Mat-Icon与mat-mdc-menu-item-text错位问题求助

问题原因 #

Angular 17升级后，mat-menu-item组件会自动生成一个带有mat-mdc-menu-item-text类的<span>标签，将容器内的所有文本元素包裹其中，但mat-icon会被排除在外。该自动生成的标签自带内边距和行高样式，直接破坏了原有布局的对齐效果。

解决方案 #

方案1：手动指定文本容器（推荐） #

手动在mat-menu-item内部创建mat-mdc-menu-item-text容器，将图标和所有文本元素移入其中。当组件检测到已存在该类的容器时，就不会自动生成额外的标签，确保图标与文本处于同一层级，保持对齐。

修改后的模板代码：

<div mat-menu-item *ngFor="let ele of arr; let i = index" class="one-row">
  <span class="mat-mdc-menu-item-text">
    <mat-icon class="one-cell" (click)="click($event, i)">clear</mat-icon>
    <span class="one-cell">{{ele.info}}</span>
    <span class="one-cell">{{ele.info2}}</span>
  </span>
</div>

方案2：CSS样式覆盖 #

如果不想修改模板结构，可以通过CSS抵消mat-mdc-menu-item-text的默认样式，同时强制行内元素垂直对齐：

组件样式代码：

.mat-mdc-menu-item-text {
  padding: 0 !important;
  line-height: inherit !important;
}

.one-row {
  display: flex;
  align-items: center;
}

.one-cell {
  flex: 1;
}

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