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

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="" >
  <span ></span>
  <mat-icon _ngcontent-rod-c335="" role="img"  aria-hidden="true" data-mat-icon-type="font">expand_more</mat-icon>
  <span > Testing </span>
  <span ></span>
  <span matripple=""  ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLButtonElement]"></span>
  <span ></span>
</button>

I'm using Angular v15

CodePudding user response：

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>

CodePudding user response：

According to the