From a9c7f5924045d418ff3b44e526ec938ff0c0f1e7 Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Tue, 12 Jul 2022 11:46:50 -0700
Subject: [PATCH] fix(material-experimental/mdc-button): always treat
 icon-button content as an icon (#25200)

(cherry picked from commit 22cb07bf0fd852436f3778786acb53fccbd361fe)
---
 .../mdc-button/button-base.ts                    |  3 ---
 src/material-experimental/mdc-button/button.html |  6 ++----
 .../mdc-button/icon-button.html                  | 16 ++++++++++++++++
 .../mdc-button/icon-button.ts                    |  6 +-----
 4 files changed, 19 insertions(+), 12 deletions(-)
 create mode 100644 src/material-experimental/mdc-button/icon-button.html

diff --git a/src/material-experimental/mdc-button/button-base.ts b/src/material-experimental/mdc-button/button-base.ts
index ee30a73b0fef..642682970d4e 100644
--- a/src/material-experimental/mdc-button/button-base.ts
+++ b/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;
 
diff --git a/src/material-experimental/mdc-button/button.html b/src/material-experimental/mdc-button/button.html
index d8644898e680..66fd1185848a 100644
--- a/src/material-experimental/mdc-button/button.html
+++ b/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])">
 </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>
diff --git a/src/material-experimental/mdc-button/icon-button.html b/src/material-experimental/mdc-button/icon-button.html
new file mode 100644
index 000000000000..b5e1b7c12e8d
--- /dev/null
+++ b/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>
diff --git a/src/material-experimental/mdc-button/icon-button.ts b/src/material-experimental/mdc-button/icon-button.ts
index 548875a196b8..a9bb8223cea7 100644
--- a/src/material-experimental/mdc-button/icon-button.ts
+++ b/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,