fix(material/icon): hides .mdc-button .mat-icon on mobile screens

Updates previous fix by updating documentation on the usage of
mat-icon within mdc-button to notify developers that mat-icon
is set to be hidden on mobile/xsmall screens to improve
accessibility and recommends the usage of aria-label or
aria-labelledby to notify screenreaders of the information that
mat-icon is supposed to convey.

Fixes b/250063405

Author: essjay05

src/material/icon/icon.md

@@ -117,6 +117,15 @@ 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

src/material/icon/icon.scss

@@ -1,3 +1,4 @@
+@use '../core/style/variables';
 @use '../core/style/vendor-prefixes';
 @use '../core/tokens/m2/mat/icon' as tokens-mat-icon;
 @use '../core/tokens/token-utils';
@@ -81,3 +82,11 @@ mat-icon {
   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;
+  }
+}