带有图标和文本的 Angular Material 按钮呈现错误的方式

Question

我有这个非常简单的角度材质按钮：

  <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 v15

Answer 1

如果您想将图标放置在按钮的末尾，请使用iconPositionEndon 指令mat-icon。我在 Angular Material 文档的迁移到基于 MDC 的组件指南中找到了这个解决方案：https ://material.angular.io/guide/mdc-migration#button