小编Raf*_*eto的帖子

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

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

  <button mat-button>
    Testing
    <mat-icon>expand_more</mat-icon>
  </button>
Run Code Online (Sandbox Code Playgroud)

但文本和图标呈现相反的方式

在此输入图像描述

我没有添加任何样式,那么是什么原因造成的呢?

这是渲染后的 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>
Run Code Online (Sandbox Code Playgroud)

我正在使用 Angular v15

angular-material angular

2
推荐指数
1
解决办法
3486
查看次数

标签 统计

angular ×1

angular-material ×1