fix(material/icon): clip overflowing icon elements (#12429)

Clips any elements that are overflowing an icon. This avoids issues where parts of the icon could stick out and layouts. Fixes #11826.
angular · Mar 10, 2022 · 025a534 · 025a534
1 parent 9e06e4a
commit 025a534
Showing 1 changed file with 4 additions and 0 deletions.
diff --git 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;