Angular Material button with icon and text render the wrong way around

Question

I have this very simple Angular Material Button:

  <button mat-button>
    Testing
    <mat-icon>expand_more</mat-icon>
  </button>

but the text and icon render the opposite way around

I've added no styling so what is causing this?

This is the rendered HTML;

<button _ngcontent-rod-c335="" mat-button="" class="mdc-button mat-mdc-button mat-unthemed mat-mdc-button-base">
  <span class="mat-mdc-button-persistent-ripple mdc-button__ripple"></span>
  <mat-icon _ngcontent-rod-c335="" role="img" class="mat-icon notranslate material-icons mat-ligature-font mat-icon-no-color" aria-hidden="true" data-mat-icon-type="font">expand_more</mat-icon>
  <span class="mdc-button__label"> Testing </span>
  <span class="mat-mdc-focus-indicator"></span>
  <span matripple="" class="mat-ripple mat-mdc-button-ripple" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLButtonElement]"></span>
  <span class="mat-mdc-button-touch-target"></span>
</button>

I'm using Angular v15

Answer 1

If You want to position your icon to the end of the button use iconPositionEnd directive on mat-icon. I found this solution in Migration to MDC-based Components guide on Angular Material documentation: https://material.angular.io/guide/mdc-migration#button

Answer 2

That indeed looks not alright. In the meantime, my solution would be to create a reusable button component defining if you want an icon to the left or right of the text. Of course you could add all the necessary configurations later on:

button HTML

<button 
  color="primary"
  [class.reverse]="reverse" 
  mat-raised-button>HELLO
  <mat-icon>person</mat-icon>
</button>

button component

@Component({...})
export class ButtonComponent {
  @Input() reverse = false;
}

button styles (.scss)

.reverse {
  display: flex;
  flex-direction: row-reverse;

  mat-icon {
    padding: 0 0 0 1rem;
    margin: 0;
  }
}

reverse with false => <app-button></app-button>

reverse with true => <app-button [reverse]="true"></app-button>