refactor(material/icon): simplifies icon style changes

Updates previous changes to icon.scss to remove unnecessary
specificity targeting and just moves classes to be generalized
under .mat-icon. Adds min-height and min-width to .mdc-button
so that when buttons (with icons especially) do not allow its
content to overflow outside of the button and maintaining its
accessibility by not allowing overlapping of text/content.

Fixes b/250063405

Author: essjay05

Diff for: src/material/button/button.scss

@@ -23,7 +23,8 @@
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  min-width: 64px;
+  min-width: min-content;
+  min-height: min-content;
   border: none;
   outline: none;
   line-height: inherit;

Diff for: src/material/icon/icon.md

@@ -117,15 +117,6 @@ information as the icon.
 2. Add the `cdk-visually-hidden` class to the `<span>`. This will make the message invisible
 on-screen but still available to screen-reader users.
 
-##### Interactive / Indicator icons within a button
-* *Note that when the presence of an icon in a button is supposed to communicate some
-information to the user or by being inlined into a block of text, as mentioned by
-Interactive icons above, an appropriate element should "own" the icon with interaction:
-* The `<mat-icon>` element should be a child of a `<button>` or `<a>` element.
-* The parent `<button>` or `<a>` should either have a meaningful label provided either through
-direct text content, `aria-label`, or `aria-labelledby`.
-* On mobile/small screens for these icons inlined with text in a button, the icon visibility is set to `hidden` to avoid overlapping into other elements and improve accessibility.
-
 ### Bidirectionality
 
 By default icons in an RTL layout will look exactly the same as in LTR, however certain icons have

Diff for: src/material/icon/icon.scss

@@ -1,4 +1,3 @@
-@use '../core/style/variables';
 @use '../core/style/vendor-prefixes';
 @use '../core/tokens/m2/mat/icon' as tokens-mat-icon;
 @use '../core/tokens/token-utils';
@@ -30,10 +29,6 @@ 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;
@@ -44,6 +39,10 @@ mat-icon {
   &.mat-ligature-font[fontIcon]::before {
     content: attr(fontIcon);
   }
+
+  // Makes button icon overflow visible to fix b/250063405
+  // Apply styles to avoid applying text-spacing to .mat-icon
+  overflow: visible;
 }
 
 // Icons that will be mirrored in RTL.
@@ -64,29 +63,3 @@ mat-icon {
     }
   }
 }
-
-// Makes button icon overflow visible to fix b/250063405
-.mat-mdc-icon-button .mat-icon,
-.mdc-button .mat-icon,
-.mat-mdc-fab-base .mat-icon,
-.mat-toolbar .mat-icon,
-.mat-mdc-tooltip-trigger .mat-icon,
-.mat-mdc-tab .mat-icon,
-.mat-mdc-form-field .mat-icon,
-.mat-grid-tile .mat-icon,
-.mat-mdc-list-item .mat-icon,
-.mat-mdc-list-option .mat-icon {
-  overflow: visible;
-  // Apply styles to avoid text spacing
-  letter-spacing: 0;
-  word-spacing: 0;
-  line-height: 1;
-}
-
-// Makes button icon visibility hidden to fix b/250063405 to avoid
-// overrunning into sibling/neighboring elements.
-@media (variables.$xsmall) {
-  .mdc-button .mat-icon {
-    visibility: hidden;
-  }
-}