From 760e93652b5d16c9fad9e0ea1cd22a6caddd8cc8 Mon Sep 17 00:00:00 2001
From: Emilio Degiovanni <1172386+emiliodeg@users.noreply.github.com>
Date: Tue, 17 Mar 2026 13:42:53 -0300
Subject: [PATCH] fix(material/button): mat-icon inside of mat-button are
 truncated

Using a imperceptible rotation of the icon enforces the rendering trigger and fixing it

Fixes: #30763
---
 src/material/button/button.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/material/button/button.scss b/src/material/button/button.scss
index e2fe568b74b7..0ba1ffe0c4d6 100644
--- a/src/material/button/button.scss
+++ b/src/material/button/button.scss
@@ -289,6 +289,10 @@ $fallbacks: m3-button.get-tokens();
 
   // Similar to MDC's `_icon-structure`, apart from the margin which we
   // handle via custom tokens in `mat-private-button-horizontal-layout`.
+  // `rotate: 0.03deg` Fixes a browser rendering issue that causes icons to be cut off in some 
+  // cases. 
+  // See: https://github.com/angular/components/issues/30763 
+  // See: https://github.com/google/material-design-icons/issues/679
   & > .mat-icon {
     $icon-size: 1.125rem;
     display: inline-block;
@@ -297,6 +301,7 @@ $fallbacks: m3-button.get-tokens();
     font-size: $icon-size;
     height: $icon-size;
     width: $icon-size;
+    rotate: 0.03deg;
   }
 }