CODEWITHSUNDEEP
angularcssangular-materialmaterial-design
Karthik G
Karthik G

Reputation: 1262

text in material icons in mat-toolbar alignment

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:

enter image description here

However, I require it to be something like this:

enter image description here

Upvotes: 1

Views: 9161

Answers (3)

William Magno
William Magno

Reputation: 538

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>

Upvotes: 0

Amit Baranes
Amit Baranes

Reputation: 8152

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 .

Upvotes: 3

Amit Chigadani
Amit Chigadani

Reputation: 29785

You can do this using flex display.

css

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

Upvotes: 1

Related Questions