Angular Material带图标与文本的按钮显示顺序颠倒问题排查

我使用Angular v15版本，编写了如下Angular Material按钮代码：

<button mat-button>
  Testing
  <mat-icon>expand_more</mat-icon>
</button>

但渲染后文本与图标的显示顺序完全相反，且未添加任何自定义样式。渲染后的HTML代码如下：

<button _ngcontent-rod-c335="" mat-button="" class="mdc-button mat-mdc-button mat-unthemed mat-mdc-button-base">
  <span class="mat-mdc-button-persistent-ripple mdc-button__ripple"></span>
  <mat-icon _ngcontent-rod-c335="" role="img" class="mat-icon notranslate material-icons mat-ligature-font mat-icon-no-color" aria-hidden="true" data-mat-icon-type="font">expand_more</mat-icon>
  <span class="mdc-button__label"> Testing </span>
  <span class="mat-mdc-focus-indicator"></span>
  <span matripple="" class="mat-ripple mat-mdc-button-ripple" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLButtonElement]"></span>
  <span class="mat-mdc-button-touch-target"></span>
</button>

问题原因 #

• Angular Material v15基于MDC（Material Design Components）重构了按钮组件，组件内部会自动处理元素结构：所有未包裹在<span class="mdc-button__label">中的直接子元素（比如示例中的<mat-icon>）会被前置到标签文本区域之外。
• 代码中直接将文本Testing放在<button>内，Angular Material会自动把这段文本提取并封装到生成的mdc-button__label span中，而<mat-icon>作为独立元素被放在了这个span的前面，最终导致显示顺序反转。

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