fix(material/icon): mat-icon misaligned when text-spacing is applied

add icon css

move style to a mixin

move icon

move overrides to demo

remove import

move mixin app layout

remove flex shrink

Author: adolgachev

src/dev-app/dev-app/dev-app-layout.scss

@@ -1,3 +1,5 @@
+@use '../../material/core/style/button-common';
+
 html, body {
   width: 100%;
   height: 100%;
@@ -73,3 +75,5 @@ body {
   display: flex;
   align-items: center;
 }
+
+@include button-common.button-icon-no-shrink();

src/material/core/style/_button-common.scss

@@ -1,3 +1,4 @@
+@use './icon-common';
 @use './vendor-prefixes';
 
 // Mixin overriding default button styles like the gray background, the border, and the outline.
@@ -15,3 +16,10 @@
     border: 0;
   }
 }
+
+// Makes button icon not cut off/shrink making the icon visible to fix b/250063405
+@mixin button-icon-no-shrink {
+  .mat-mdc-button-base {
+    @include icon-common.icon-no-shrink();
+  }
+}

src/material/core/style/_icon-common.scss

@@ -0,0 +1,7 @@
+
+// Use in components with icons to not cut off/shrink making the icon visible to fix b/250063405
+@mixin icon-no-shrink() {
+  .mat-icon {
+    min-height: min-content;  // stylelint-disable material/no-prefixes
+  }
+}