如何在Angular Material Design的Mat-icon按钮中设置数字

Question

我正在尝试在Mat-icon按钮中设置数字而不是其他图标。但是在我的情况下，当我设置一些其他图标时它正在工作，但是当我设置数字时它正在显示一个空白按钮。

我试图解决，但找不到问题。

app.component.html

<div class="col-sm-9">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <div class="row">
            <div class="col-sm-4">
              <button mat-mini-fab><mat-icon >1</mat-icon></button>
            </div>
            <div class="col-sm-4">
              <button mat-mini-fab><mat-icon >2</mat-icon></button>
            </div>
            <div class="col-sm-4">
              <button mat-mini-fab><mat-icon >3</mat-icon></button>
            </div>
              <div class="col-sm-4">
              <button mat-mini-fab><mat-icon >4</mat-icon></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

谁能帮我解决这个问题。

Answer 1

只需删除mat-icon ：

<button mat-mini-fab>1</button>

Answer 2

MatIcon将用您提供的图标集中的图标替换其内容（默认情况下为实物图标），如果找不到则不显示任何内容。 例如，如果您具有<mat-icon>home<mat-icon> ，它将显示主页图标，但是如果您具有<mat-icon>asd<mat-icon> ，则将不显示任何内容（您可以在此处找到列表），数字也一样。

如果您想要一个带有1的迷你晶圆厂按钮，只需使用<button mat-mini-fab>3</button> ，则无需使用mat-icon