bug(mat-button): several issues with mat-icon inside mat-button

[DzmVasileusky]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

14

Description

There are several issues when you are trying to use mat-icon inside mat-button.

Issue 1.
Button layout is not consistent if we are using ng-container, mat-icon is put in .mdc-button__label which leads to inconsistence in how styles are applied to an icon and text near it.
Of course ng-container as a structural component shouldn't have influence on how button is structured.

  <button mat-flat-button color="primary">
    <ng-container *ngIf="true">
      <mat-icon
        aria-hidden="false"
        aria-label="Example home icon"
        fontIcon="home"
      ></mat-icon>
    </ng-container>
  </button>

Issue 2.
Icon placed after text is appearing before text.

  <button mat-flat-button color="primary">
    <span>Label</span>
    <mat-icon
      aria-hidden="false"
      aria-label="Example home icon"
      fontIcon="home"
    ></mat-icon>
  </button>

Reproduction

Steps to reproduce showing all 3 issues:
Open that stackblitz

Expected Behavior

Issue 1.
mat-icon or any other custom content should be either inside or outside .mdc-button__label no matter what structural directives are used

Issue 2.
mat-icon should be at the same position relative to the text as it is in code

Actual Behavior

Issue 1.
mat-icon is inside .mdc-button__label if inside ng-container in code and outside - if not

Issue 2.
mat-icon do not preserve an order implemented in code

Environment

• Angular: 15.1.1
• CDK/Material: 15.1.1
• Browser(s): any
• Operating System (e.g. Windows, macOS, Ubuntu): any

[amysorto]

Confirming that adding ng-container when trying to add mat-icon within mat-button is messing with the styling in v16.