mat-toolbar 對齊中材料圖標中的文本

Question

我正在使用有角度的材料，mat-toolbar 來創建一個工具欄。 我需要 mat-icon 和相關文本相互對齊（兩行並居中對齊）

代碼：

<mat-toolbar class="secondary-toolbar">
  <button mat-icon-button>
    <mat-icon>apps</mat-icon>
    Dashboard
  </button>
</mat-toolbar>

此代碼顯示如下圖像：

但是，我要求它是這樣的：

Answer 1

添加到儀表板跨度標識符，例如 class 或 id 。

<span id="Dashboard">Dashboard</span>

然后，添加顯示 flex 樣式。

#Dashboard
{
 display: flex;
 } 

Stackblitz示例。

Answer 2

您可以使用flex display 來做到這一點。

css

.secondary-toolbar button{
  display: flex;
  flex-direction: column;
}

Answer 3

嘗試這個

.button-icon-text {
    width: unset;
}

<button mat-icon-button class="button-icon-text" aria-label="Example icon-button with menu icon and text">
    <mat-icon>menu</mat-icon>
    <span>Menu</span>
</button>