diff --git a/docs/scenes/src/index.html b/docs/scenes/src/index.html
index c4a7b8f908e9..370ccf67c79d 100644
--- a/docs/scenes/src/index.html
+++ b/docs/scenes/src/index.html
@@ -6,7 +6,7 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="scenes/src/favicon.ico">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined&display=block" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>
diff --git a/docs/src/index.html b/docs/src/index.html
index b08d8a49f61c..5edb7ffa5dc6 100644
--- a/docs/src/index.html
+++ b/docs/src/index.html
@@ -54,7 +54,7 @@
   <link rel="dns-prefetch" href="https://www.googletagmanager.com">
 
   <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined&display=block" rel="stylesheet">
 
   <!--Structured Data-->
   <script type="application/ld+json">
diff --git a/docs/src/styles/_markdown.scss b/docs/src/styles/_markdown.scss
index 51c8dc31be0d..aa9184a507a9 100644
--- a/docs/src/styles/_markdown.scss
+++ b/docs/src/styles/_markdown.scss
@@ -33,8 +33,7 @@
       font-weight: 400;
     }
 
-    // stylelint-disable-next-line selector-class-pattern
-    h3 .material-icons, h4 .material-icons {
+    h3 .mat-icon, h4 .mat-icon {
       color: var(--mat-sys-on-surface);
     }
 
@@ -109,13 +108,11 @@
       }
     }
 
-    // stylelint-disable-next-line selector-class-pattern
-    .material-icons {
+    .mat-icon {
       visibility: hidden;
     }
 
-    // stylelint-disable-next-line selector-class-pattern
-    &:hover .material-icons {
+    &:hover .mat-icon {
       visibility: visible;
     }
   }
