angular - 垫子工具栏对齐中的 Material 图标中的文本

Question

我正在使用 Angular Material 、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>

然后，添加 display flex 样式。

#Dashboard
{
 display: flex;
 } 

Stackblitz示例。