text in material icons in mat-toolbar alignment

Question

I am using angular material, mat-toolbar to create a toolbar. I need to mat-icon and the related text to align one another (in two rows and center aligned)

Code:

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

This code shows the image as below:

However, I require it to be something like this:

Answer 1

Add to the dashboard span identifier such as class or id .

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

Than, Add display flex styling .

#Dashboard
{
 display: flex;
 } 

Stackblitz Example .

Answer 2

You can do this using flex display.

css

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

Answer 3

Try this

.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>