如何在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