How do we align text within a mat-button to the left?

Question

How do we align the text in an Angular Material button to the left?

This answer suggest text-align:left?

And I tried it in this demo, however no love ...

https://stackblitz.com/edit/angular-ivy-lcnasu?file=src%2Fapp%2Fapp.component.html,src%2Fstyles.css,src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fapp.component.css,src%2Findex.html

Thoughts?

Answer 1

Because .mdc-button uses display: inline-flex; you will have to use justify-content: flex-start; to align the text to the left.

See below:

<button style="width: 10rem; justify-content: flex-start;" mat-raised-button>Basic</button>

Stackblitz