角度升级 16 至 17 后，Mat-Icon 不在 mat-mdc-menu-item-text 中

Question

我目前正在从 Angular 16 迁移到 Angular 17。它是一个 Mat 图标，用于从 Mat 菜单中的列表中删除条目，旁边有一些信息文本。在一切都正确对齐之前，但在更新之后，生成的 html 代码添加了一个带有名为“mat-mdc-menu-item-text”的类的 span 标签。 Angular 自动将 mat-menu-item 中的所有文本放置在 mat-mdc-menu-item-text 范围内，并将 mat-icon 留在生成的 span 标记之外，导致图标与文本完全不对齐。是否可以停用此生成的跨度或将垫子图标移入其中？

这里是角度模板

<div mat-menu-item *ngFor="let ele of arr; let i = index" class="one-row">
      <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>
    </div>
  </div>

这是来自 chromes 检查器的 html 示例，用于 mat 菜单的一行：

<div class="one-row ...">
  <mat-icon class="...">clear<mat-icon>
  <span class="mat-mdc-menu-item-text">
    <span class="...">ele.info</span>
    <span class="...">ele.info2</span>
  </span>
</div>

<span class="mat-mdc-menu-item-text">

添加了一些填充和行高，完全改变了行的设计。

Answer 1

不可能删除生成的 html，因为它以编程方式来自 mat-menu，更改它涉及修改有问题的库，只需编写一些 CSS 来覆盖这些更改并将您的 UI 恢复到原始状态！

.mat-mdc-menu-item-text {
    padding: 0px !important;/* give whatever value solves your issue */
    line-height: 12px !important; /* give whatever value solves your issue */
}