From c9e9cb736f09b08323a5216e50fbd7144db50fa0 Mon Sep 17 00:00:00 2001
From: Andrey Dolgachev <adolgachev@users.noreply.github.com>
Date: Fri, 28 Mar 2025 15:13:35 -0700
Subject: [PATCH] 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
---
 src/dev-app/dev-app/dev-app-layout.scss     | 4 ++++
 src/material/core/style/_button-common.scss | 8 ++++++++
 src/material/core/style/_icon-common.scss   | 7 +++++++
 3 files changed, 19 insertions(+)
 create mode 100644 src/material/core/style/_icon-common.scss

diff --git a/src/dev-app/dev-app/dev-app-layout.scss b/src/dev-app/dev-app/dev-app-layout.scss
index f9e48222bebe..e694d52dbac9 100644
--- a/src/dev-app/dev-app/dev-app-layout.scss
+++ b/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();
diff --git a/src/material/core/style/_button-common.scss b/src/material/core/style/_button-common.scss
index 08f0a53f9934..426016174fe0 100644
--- a/src/material/core/style/_button-common.scss
+++ b/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();
+  }
+}
diff --git a/src/material/core/style/_icon-common.scss b/src/material/core/style/_icon-common.scss
new file mode 100644
index 000000000000..8f0d3e66654b
--- /dev/null
+++ b/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
+  }
+}