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/app/app.component.html,src/styles.css,src/app/app.module.ts,src/app/app.component.css,src/index.html

Thoughts?

CodePudding user response：

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