diff --git a/src/material/badge/_badge-theme.scss b/src/material/badge/_badge-theme.scss
index c4d2f099a2ac..c65c91ffc3f8 100644
--- a/src/material/badge/_badge-theme.scss
+++ b/src/material/badge/_badge-theme.scss
@@ -102,6 +102,14 @@ $_badge-structure-emitted: false !default;
     position: relative;
   }
 
+  // The badge should make sure its host is overflow visible so that the badge content
+  // can be rendered outside of the element. Some components such as <mat-icon> explicitly
+  // style `overflow: hidden` so this requires extra specificity so that it does not
+  // depend on style load order.
+  .mat-badge.mat-badge {
+    overflow: visible;
+  }
+
   .mat-badge-hidden {
     .mat-badge-content {
       display: none;