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

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

Continue reading...