How can I left align the text in an Angular Material stretched md-button?

Use empty <span> tag with a flex attribute, as shown below. You can even specify a value to the flex attribute to get a more specific location.

<div layout="row" layout-align="start center" flex>
    <md-button>button 1 </md-button>
    <span flex></span>
</div>

If you just want to align text inside a button, try setting the style attribute like this:

<md-button style="text-align:left">button </md-button>

You can do this if using within md-toolbar(Angular 4) Angular 6+:

Html

<mat-toolbar id="toolbar" color="primary" >
  <mat-button>button 1 </mat-button>
  <span class="spacing"></span>
  <mat-button>button 2 </mat-button>
</mat-toolbar>

OR

<mat-toolbar id="toolbar" color="primary">
  <mat-button>button 1 </mat-button>
  <span style="flex: 1 1 auto;"></span>
  <mat-button>button 2 </mat-button>
</mat-toolbar>

Your CSS if no styling in HTML:

.spacing {
    flex: 1 1 auto;
}

Hope this helps someone.