From 022dfc9023cd2b610d70db4dc3538ef029997f1e Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Fri, 4 Mar 2022 09:42:00 +0100
Subject: [PATCH] fix(material/icon): clip overflowing icon elements

Clips any elements that are overflowing an icon. This avoids issues where parts of the icon could stick out and layouts.

Fixes #11826.
---
 src/material/icon/icon.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/material/icon/icon.scss b/src/material/icon/icon.scss
index 9c9929ef9405..66a37a418388 100644
--- a/src/material/icon/icon.scss
+++ b/src/material/icon/icon.scss
@@ -11,6 +11,10 @@ $size: 24px !default;
   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;