bug(MatButton): Extended matFab layout broken when mat-icon is behind more than one @if statement

[sechel]

Description

When nesting more than one @if statement around the mat-icon of an extended matFab button the layout of the button does not seem to pick up the icon anymore. Instead it seems to be part of the label and then incorrectly placed.

<section>
  <div class="example-button-row">
    <div class="example-flex-container">
      <button matFab extended>
        <mat-icon>favorite</mat-icon>
        <span>No if statement</span>
      </button>
      <button matFab extended>
        @if (true) { <mat-icon>favorite</mat-icon> }
        <span>Icon in single if statement</span>
      </button>
      <button matFab extended>
        @if (true) { @if (true) { <mat-icon>favorite</mat-icon> } }
        <span>Icon in double if statement</span>
      </button>
    </div>
  </div>
</section>

Reproduction

https://stackblitz.com/edit/s1vrmxth

Environment

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

[crisbeto]

This is a framework issue. See angular/angular#54035.