refactor(material/icon): changes method of making icon visible with t…

…ext-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

@@ -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;

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;
+}