From e9c8daf925ee21b5e57f208b42d44f45005b5271 Mon Sep 17 00:00:00 2001
From: Joy Serquina <serquina@google.com>
Date: Wed, 9 Oct 2024 19:15:18 +0000
Subject: [PATCH] refactor(material/icon): changes method of making icon
 visible with text-spacing

Updates previous fix to revert removal of overflow: hidden to remove the breaking
change and updates the method of ensuring .mat-icon remains visible by applying
flex-shrink to it so the icon does not get cut off and improves accessibility.

Fixes b/250063405
---
 src/material/button/button.scss |  3 +--
 src/material/icon/icon.scss     | 14 +++++++++-----
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/material/button/button.scss b/src/material/button/button.scss
index b794665ce385..a44a6f6a684c 100644
--- a/src/material/button/button.scss
+++ b/src/material/button/button.scss
@@ -23,8 +23,7 @@
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  min-width: min-content;
-  min-height: min-content;
+  min-width: 64px;
   border: none;
   outline: none;
   line-height: inherit;
diff --git a/src/material/icon/icon.scss b/src/material/icon/icon.scss
index ebec78e99300..e65bd29d3db3 100644
--- a/src/material/icon/icon.scss
+++ b/src/material/icon/icon.scss
@@ -29,6 +29,10 @@ mat-icon {
   height: $size;
   width: $size;
 
+  // In some cases the icon elements may extend beyond the container. Clip these cases
+  // in order to avoid weird overflows and click areas. See #11826.
+  overflow: hidden;
+  
   &.mat-icon-inline {
     font-size: inherit;
     height: inherit;
@@ -40,11 +44,6 @@ mat-icon {
     content: attr(fontIcon);
   }
 
-  // Makes button icon overflow visible to fix b/250063405
-  // Undoes previous fix to Issue #11826 in preference of
-  // fixing to improve accessibility by not having the icon
-  // get cut off
-  overflow: visible;
 }
 
 // Icons that will be mirrored in RTL.
@@ -65,3 +64,8 @@ mat-icon {
     }
   }
 }
+
+// Makes button icon not cut off/shrink making the icon visible to fix b/250063405
+.mat-mdc-button-base .mat-icon {
+  flex-shrink: 0;
+}