angular material icons renders first before the interpolation

Question

I'm doing an angular project using angular material, while im using mat-icons it keeps coming before the interpolation even though i coded it after the interpolation enter image description here

i tried typing anything before of after the icon and the icon comes first no matter what

Sort by {{sort}} expand_more

Answer 1

I couldn't find it documented anywhere in the official docs for some reason (in neither mat-button or mat-icon parts at least). Lukcily, it's at least documented in the migration guide here.

What you need to do since v15 is to add iconPositionEnd directive to the mat-icon inside the mat-button, e.g.

<button mat-button>
  Icon after text
  <mat-icon iconPositionEnd>favorite</mat-icon>
</button>

EDIT: There already is a git issue about this feature not being documented here.