текст в значках материалов в выравнивании мат-панели

Question

Я использую угловой материал, мат-панель инструментов для создания панели инструментов. Мне нужно мат-значок и связанный текст, чтобы выровнять друг друга (в две строки и по центру)

Код:

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

Этот код показывает изображение как показано ниже:

Однако я требую, чтобы это было что-то вроде этого:

Answer 1

Добавьте к идентификатору диапазона панели инструментов, например, класс или идентификатор.

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

Чем, Добавить отображение flex-стиля.

#Dashboard
{
 display: flex;
 } 

Stackblitz Пример.

Answer 2

Вы можете сделать это, используя flex display.

css

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