fix(material-experimental/mdc-button): always treat icon-button conte…

…nt as an icon (#25200)

src/material-experimental/mdc-button/button-base.ts

@@ -88,9 +88,6 @@ export class MatButtonBase
   /** Whether this button is a FAB. Used to apply the correct class on the ripple. */
   _isFab = false;
 
-  /** Whether this button is an icon button. Used to apply the correct class on the ripple. */
-  _isIconButton = false;
-
   /** Reference to the MatRipple instance of the button. */
   @ViewChild(MatRipple) ripple: MatRipple;
 

src/material-experimental/mdc-button/button.html

@@ -1,8 +1,7 @@
 <span
     class="mat-mdc-button-persistent-ripple"
-    [class.mdc-button__ripple]="!_isFab && !_isIconButton"
-    [class.mdc-fab__ripple]="_isFab"
-    [class.mdc-icon-button__ripple]="_isIconButton"></span>
+    [class.mdc-button__ripple]="!_isFab"
+    [class.mdc-fab__ripple]="_isFab"></span>
 
 <ng-content select=".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])">
 </ng-content>
@@ -20,7 +19,6 @@
 
 <span matRipple class="mat-mdc-button-ripple"
      [matRippleDisabled]="_isRippleDisabled()"
-     [matRippleCentered]="_isIconButton"
      [matRippleTrigger]="_elementRef.nativeElement"></span>
 
 <span class="mat-mdc-button-touch-target"></span>

src/material-experimental/mdc-button/icon-button.html

@@ -0,0 +1,16 @@
+<span class="mat-mdc-button-persistent-ripple mdc-icon-button__ripple"></span>
+
+<ng-content></ng-content>
+
+<!--
+  The indicator can't be directly on the button, because MDC uses ::before for high contrast
+  indication and it can't be on the ripple, because it has a border radius and overflow: hidden.
+-->
+<span class="mat-mdc-focus-indicator"></span>
+
+<span matRipple class="mat-mdc-button-ripple"
+      [matRippleDisabled]="_isRippleDisabled()"
+      [matRippleCentered]="true"
+      [matRippleTrigger]="_elementRef.nativeElement"></span>
+
+<span class="mat-mdc-button-touch-target"></span>

src/material-experimental/mdc-button/icon-button.ts

@@ -34,7 +34,7 @@ import {
  */
 @Component({
   selector: `button[mat-icon-button]`,
-  templateUrl: 'button.html',
+  templateUrl: 'icon-button.html',
   styleUrls: ['icon-button.css', 'button-high-contrast.css'],
   inputs: MAT_BUTTON_INPUTS,
   host: MAT_BUTTON_HOST,
@@ -43,8 +43,6 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatIconButton extends MatButtonBase {
-  override _isIconButton = true;
-
   constructor(
     elementRef: ElementRef,
     platform: Platform,
@@ -71,8 +69,6 @@ export class MatIconButton extends MatButtonBase {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatIconAnchor extends MatAnchorBase {
-  override _isIconButton = true;
-
   constructor(
     elementRef: ElementRef,
     platform: Platform,