Mat-toolbar content alignmnet

Question

I want to have content aligned to left and right in this example.

I want Icon on the left side, Text in the middle and username on the far right of the row.

How can I do this?

Answer 1

You can do the below to accomplish this.

Move the mat-icon to the top of the container to put it first.

 <mat-toolbar-row>
   <mat-icon class="example-icon">verified_user</mat-icon>

Apply example-spacer class to the text you want in the middle.

<span class="example-spacer">Second Line</span>

Add the following to the example-spacer class in toolbar-multirow-example.css

text-align: center;

User name after that

<span>User Name</span>

Stackblitz