diff --git a/devtools/projects/demo-standalone/src/BUILD.bazel b/devtools/projects/demo-standalone/src/BUILD.bazel
index 1f991e6e911..68cf32ace19 100644
--- a/devtools/projects/demo-standalone/src/BUILD.bazel
+++ b/devtools/projects/demo-standalone/src/BUILD.bazel
@@ -62,6 +62,7 @@ filegroup(
         ":browser_specific_styles",
         ":demo_styles",
         ":index.html",
+        "//devtools/projects/demo-standalone/src/assets",
         "//packages/zone.js/bundles:zone.umd.js",
     ],
 )
diff --git a/devtools/projects/demo-standalone/src/assets/BUILD.bazel b/devtools/projects/demo-standalone/src/assets/BUILD.bazel
new file mode 100644
index 00000000000..2168887f51e
--- /dev/null
+++ b/devtools/projects/demo-standalone/src/assets/BUILD.bazel
@@ -0,0 +1,9 @@
+package(default_visibility = ["//:__subpackages__"])
+
+filegroup(
+    name = "assets",
+    srcs = [
+        "//third_party/fonts.google.com/material-symbols-outlined",
+        "//third_party/fonts.google.com/material-symbols-outlined:LICENSE",
+    ],
+)
diff --git a/devtools/projects/demo-standalone/src/index.html b/devtools/projects/demo-standalone/src/index.html
index f84db818ce0..958e2f5ac35 100644
--- a/devtools/projects/demo-standalone/src/index.html
+++ b/devtools/projects/demo-standalone/src/index.html
@@ -6,7 +6,10 @@
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="assets/icon16.png" />
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+    <link
+      rel="stylesheet"
+      href="../third_party/fonts.google.com/material-symbols-outlined/outlined.css"
+    />
 
     <link rel="stylesheet" href="./styles.css" />
   </head>
diff --git a/devtools/projects/ng-devtools/src/lib/devtools.component.ts b/devtools/projects/ng-devtools/src/lib/devtools.component.ts
index e4bc309270e..731698ff650 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools.component.ts
@@ -20,6 +20,7 @@ import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {Frame} from './application-environment';
 import {BrowserStylesService} from './application-services/browser_styles_service';
 import {WINDOW_PROVIDER} from './application-providers/window_provider';
+import {MatIconRegistry} from '@angular/material/icon';
 
 const DETECT_ANGULAR_ATTEMPTS = 10;
 
@@ -56,7 +57,7 @@ const LAST_SUPPORTED_VERSION = 9;
   imports: [DevToolsTabsComponent, MatTooltip, MatProgressSpinnerModule, MatTooltipModule],
   providers: [WINDOW_PROVIDER, ThemeService],
 })
-export class DevToolsComponent implements OnInit, OnDestroy {
+export class DevToolsComponent implements OnDestroy {
   readonly AngularStatus = AngularStatus;
   readonly angularStatus = signal(AngularStatus.UNKNOWN);
   readonly angularVersion = signal<string | undefined>(undefined);
@@ -77,9 +78,7 @@ export class DevToolsComponent implements OnInit, OnDestroy {
   });
 
   private readonly _messageBus = inject<MessageBus<Events>>(MessageBus);
-  private readonly _themeService = inject(ThemeService);
   private readonly _frameManager = inject(FrameManager);
-  private readonly _browserStyles = inject(BrowserStylesService);
 
   private _interval$ = interval(500).subscribe((attempt) => {
     if (attempt === DETECT_ANGULAR_ATTEMPTS) {
@@ -88,13 +87,10 @@ export class DevToolsComponent implements OnInit, OnDestroy {
     this._messageBus.emit('queryNgAvailability');
   });
 
-  inspectFrame(frame: Frame) {
-    this._frameManager.inspectFrame(frame);
-  }
-
-  ngOnInit(): void {
-    this._themeService.initializeThemeWatcher();
-    this._browserStyles.initBrowserSpecificStyles();
+  constructor() {
+    inject(ThemeService).initializeThemeWatcher();
+    inject(BrowserStylesService).initBrowserSpecificStyles();
+    inject(MatIconRegistry).setDefaultFontSetClass('material-symbols-outlined');
 
     this._messageBus.once('ngAvailability', ({version, devMode, ivy, hydration}) => {
       this.angularStatus.set(version ? AngularStatus.EXISTS : AngularStatus.DOES_NOT_EXIST);
@@ -106,6 +102,10 @@ export class DevToolsComponent implements OnInit, OnDestroy {
     });
   }
 
+  inspectFrame(frame: Frame) {
+    this._frameManager.inspectFrame(frame);
+  }
+
   ngOnDestroy(): void {
     this._interval$.unsubscribe();
   }
diff --git a/devtools/projects/shell-browser/src/assets/BUILD.bazel b/devtools/projects/shell-browser/src/assets/BUILD.bazel
index 1402a23dcd9..d7ac87d0f91 100644
--- a/devtools/projects/shell-browser/src/assets/BUILD.bazel
+++ b/devtools/projects/shell-browser/src/assets/BUILD.bazel
@@ -7,7 +7,7 @@ filegroup(
         "**/*.png",
         "*.css",
     ]) + [
-        "//third_party/github.com/google/material-design-icons",
-        "//third_party/github.com/google/material-design-icons:LICENSE",
+        "//third_party/fonts.google.com/material-symbols-outlined",
+        "//third_party/fonts.google.com/material-symbols-outlined:LICENSE",
     ],
 )
diff --git a/devtools/projects/shell-browser/src/index.html b/devtools/projects/shell-browser/src/index.html
index 51643ce57b1..41f90405c1c 100644
--- a/devtools/projects/shell-browser/src/index.html
+++ b/devtools/projects/shell-browser/src/index.html
@@ -8,7 +8,7 @@
     <link rel="icon" type="image/x-icon" href="assets/icon16.png" />
     <link
       rel="stylesheet"
-      href="./third_party/github.com/google/material-design-icons/material-icons.css"
+      href="./third_party/fonts.google.com/material-symbols-outlined/outlined.css"
     />
     <link rel="stylesheet" href="./styles.css" />
   </head>
diff --git a/devtools/projects/shell-browser/src/popups/not-angular.html b/devtools/projects/shell-browser/src/popups/not-angular.html
index a83828a1b55..f38821cae80 100644
--- a/devtools/projects/shell-browser/src/popups/not-angular.html
+++ b/devtools/projects/shell-browser/src/popups/not-angular.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <link
-      href="../third_party/github.com/google/material-design-icons/material-icons.css"
+      href="../third_party/fonts.google.com/material-symbols-outlined/outlined.css"
       rel="stylesheet"
     />
     <style>
@@ -41,7 +41,7 @@
         margin-bottom: 10px;
       }
 
-      .material-icons {
+      .material-symbols-outlined {
         color: rgb(107, 107, 107);
         margin-right: 7px;
       }
@@ -52,7 +52,7 @@
     <div class="modal-content">
       <h4 class="header-text">Angular DevTools</h4>
       <div class="message">
-        <span class="material-icons md-48">cancel</span>
+        <span class="material-symbols-outlined md-48">cancel</span>
         <p>This page is not using Angular, or it has a strict extension policy.</p>
       </div>
     </div>
diff --git a/devtools/projects/shell-browser/src/popups/production.html b/devtools/projects/shell-browser/src/popups/production.html
index 45ab5e4309a..fd2650124dd 100644
--- a/devtools/projects/shell-browser/src/popups/production.html
+++ b/devtools/projects/shell-browser/src/popups/production.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <link
-      href="../third_party/github.com/google/material-design-icons/material-icons.css"
+      href="../third_party/fonts.google.com/material-symbols-outlined/outlined.css"
       rel="stylesheet"
     />
     <style>
@@ -41,7 +41,7 @@
         margin-bottom: 10px;
       }
 
-      .material-icons {
+      .material-symbols-outlined {
         color: rgb(107, 107, 107);
         margin-right: 10px;
       }
@@ -52,7 +52,7 @@
     <div class="modal-content">
       <h4 class="header-text">Angular DevTools</h4>
       <div class="message">
-        <span class="material-icons md-48">settings</span>
+        <span class="material-symbols-outlined md-48">settings</span>
         <section>
           <p>
             Angular application running in
diff --git a/devtools/projects/shell-browser/src/popups/supported.html b/devtools/projects/shell-browser/src/popups/supported.html
index c8dfd451bcd..a9e0b2a91f7 100644
--- a/devtools/projects/shell-browser/src/popups/supported.html
+++ b/devtools/projects/shell-browser/src/popups/supported.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <link
-      href="../third_party/github.com/google/material-design-icons/material-icons.css"
+      href="../third_party/fonts.google.com/material-symbols-outlined/outlined.css"
       rel="stylesheet"
     />
     <style>
@@ -48,7 +48,7 @@
         margin-bottom: 10px;
       }
 
-      .material-icons {
+      .material-symbols-outlined {
         color: rgb(107, 107, 107);
         margin-right: 7px;
       }
@@ -60,12 +60,12 @@
       <h4 class="header-text">Angular DevTools</h4>
       <div class="message">
         <section class="section-content">
-          <span class="material-icons md-48">check</span>
+          <span class="material-symbols-outlined md-48">check</span>
           <p>Angular application running development mode.</p>
         </section>
         <br />
         <section class="section-content">
-          <span class="material-icons md-48">settings</span>
+          <span class="material-symbols-outlined md-48">settings</span>
           <p>Open developer tools, and select the Angular tab.</p>
         </section>
       </div>
diff --git a/devtools/projects/shell-browser/src/popups/unsupported.html b/devtools/projects/shell-browser/src/popups/unsupported.html
index db90fa72342..813a1ba0dff 100644
--- a/devtools/projects/shell-browser/src/popups/unsupported.html
+++ b/devtools/projects/shell-browser/src/popups/unsupported.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <link
-      href="../third_party/github.com/google/material-design-icons/material-icons.css"
+      href="../third_party/fonts.google.com/material-symbols-outlined/outlined.css"
       rel="stylesheet"
     />
     <style>
@@ -45,7 +45,7 @@
         margin-bottom: 10px;
       }
 
-      .material-icons {
+      .material-symbols-outlined {
         color: rgb(107, 107, 107);
         margin-right: 7px;
       }
@@ -57,11 +57,11 @@
       <h4 class="header-text">Angular DevTools</h4>
       <div class="message">
         <section>
-          <span class="material-icons md-48">check</span>
+          <span class="material-symbols-outlined md-48">check</span>
           <p>This page is using Angular.</p>
         </section>
         <section>
-          <span class="material-icons md-48">settings</span>
+          <span class="material-symbols-outlined md-48">settings</span>
           <p>You can use DevTools with Angular v12+</p>
         </section>
       </div>
diff --git a/devtools/src/BUILD.bazel b/devtools/src/BUILD.bazel
index f5ba71ab6b1..7496ed2c0d1 100644
--- a/devtools/src/BUILD.bazel
+++ b/devtools/src/BUILD.bazel
@@ -65,6 +65,7 @@ filegroup(
         ":browser_specific_styles",
         ":demo_styles",
         ":index.html",
+        "//devtools/src/assets",
         "//packages/zone.js/bundles:zone.umd.js",
     ],
 )
diff --git a/devtools/src/assets/BUILD.bazel b/devtools/src/assets/BUILD.bazel
new file mode 100644
index 00000000000..2168887f51e
--- /dev/null
+++ b/devtools/src/assets/BUILD.bazel
@@ -0,0 +1,9 @@
+package(default_visibility = ["//:__subpackages__"])
+
+filegroup(
+    name = "assets",
+    srcs = [
+        "//third_party/fonts.google.com/material-symbols-outlined",
+        "//third_party/fonts.google.com/material-symbols-outlined:LICENSE",
+    ],
+)
diff --git a/devtools/src/index.html b/devtools/src/index.html
index f84db818ce0..958e2f5ac35 100644
--- a/devtools/src/index.html
+++ b/devtools/src/index.html
@@ -6,7 +6,10 @@
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="assets/icon16.png" />
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+    <link
+      rel="stylesheet"
+      href="../third_party/fonts.google.com/material-symbols-outlined/outlined.css"
+    />
 
     <link rel="stylesheet" href="./styles.css" />
   </head>
diff --git a/third_party/fonts.google.com/material-symbols-outlined/BUILD.bazel b/third_party/fonts.google.com/material-symbols-outlined/BUILD.bazel
new file mode 100644
index 00000000000..bc3312670c7
--- /dev/null
+++ b/third_party/fonts.google.com/material-symbols-outlined/BUILD.bazel
@@ -0,0 +1,19 @@
+licenses(["notice"])
+
+# Downloaded from: https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,1,0
+# Timestamp: 05/12/2025
+exports_files(["LICENSE"])
+
+filegroup(
+    name = "material-symbols-outlined",
+    srcs = [
+        # https://github.com/marella/material-symbols/blob/58064e5e223ccf97fda6846bf98ba88627a0bebe/material-symbols/outlined.css
+        "outlined.css",
+        # https://fonts.gstatic.com/s/materialsymbolsoutlined/v241/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2
+        "material-symbols-outlined.woff2",
+    ],
+    visibility = [
+        "//devtools:__subpackages__",
+        "//modules/playground:__subpackages__",
+    ],
+)
diff --git a/third_party/github.com/google/material-design-icons/LICENSE b/third_party/fonts.google.com/material-symbols-outlined/LICENSE
similarity index 100%
rename from third_party/github.com/google/material-design-icons/LICENSE
rename to third_party/fonts.google.com/material-symbols-outlined/LICENSE
diff --git a/third_party/fonts.google.com/material-symbols-outlined/LOCAL_MODS.md b/third_party/fonts.google.com/material-symbols-outlined/LOCAL_MODS.md
new file mode 100644
index 00000000000..1230b9c346b
--- /dev/null
+++ b/third_party/fonts.google.com/material-symbols-outlined/LOCAL_MODS.md
@@ -0,0 +1 @@
+- `outlined.css` has been modified to only declare `font-weight: 400`
\ No newline at end of file
diff --git a/third_party/fonts.google.com/material-symbols-outlined/material-symbols-outlined.woff2 b/third_party/fonts.google.com/material-symbols-outlined/material-symbols-outlined.woff2
new file mode 100644
index 00000000000..b5f1fdfe13c
Binary files /dev/null and b/third_party/fonts.google.com/material-symbols-outlined/material-symbols-outlined.woff2 differ
diff --git a/third_party/github.com/google/material-design-icons/material-icons.css b/third_party/fonts.google.com/material-symbols-outlined/outlined.css
similarity index 55%
rename from third_party/github.com/google/material-design-icons/material-icons.css
rename to third_party/fonts.google.com/material-symbols-outlined/outlined.css
index de5cb88b582..f6536debdd1 100644
--- a/third_party/github.com/google/material-design-icons/material-icons.css
+++ b/third_party/fonts.google.com/material-symbols-outlined/outlined.css
@@ -1,31 +1,24 @@
 @font-face {
-  font-family: 'Material Icons';
+  font-family: 'Material Symbols Outlined';
   font-style: normal;
   font-weight: 400;
-  src: url("./MaterialIcons-Regular.ttf") format('truetype');
+  src: url('./material-symbols-outlined.woff2') format('woff2');
 }
 
-.material-icons {
-  font-family: 'Material Icons';
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
   font-weight: normal;
   font-style: normal;
-  font-size: 24px;  /* Preferred icon size */
-  display: inline-block;
+  font-size: 24px;
   line-height: 1;
-  text-transform: none;
   letter-spacing: normal;
-  word-wrap: normal;
+  text-transform: none;
+  display: inline-block;
   white-space: nowrap;
+  word-wrap: normal;
   direction: ltr;
-
-  /* Support for all WebKit browsers. */
   -webkit-font-smoothing: antialiased;
-  /* Support for Safari and Chrome. */
-  text-rendering: optimizeLegibility;
-
-  /* Support for Firefox. */
   -moz-osx-font-smoothing: grayscale;
-
-  /* Support for IE. */
+  text-rendering: optimizeLegibility;
   font-feature-settings: 'liga';
 }
diff --git a/third_party/github.com/google/material-design-icons/BUILD.bazel b/third_party/github.com/google/material-design-icons/BUILD.bazel
deleted file mode 100644
index 1102771e3ef..00000000000
--- a/third_party/github.com/google/material-design-icons/BUILD.bazel
+++ /dev/null
@@ -1,19 +0,0 @@
-licenses(["notice"])
-
-# Downloaded from: https://github.com/google/material-design-icons/blob/3.0.1/LICENSE
-# Timestamp: 06/02/2019
-exports_files(["LICENSE"])
-
-filegroup(
-    name = "material-design-icons",
-    srcs = [
-        # https://github.com/google/material-design-icons/blob/3.0.1/iconfont/material-icons.css
-        "material-icons.css",
-        # https://github.com/google/material-design-icons/blob/f5cdf3a23d3acdd8490fc4879f4f59a705f409ef/font/MaterialIcons-Regular.ttf
-        "MaterialIcons-Regular.ttf",
-    ],
-    visibility = [
-        "//devtools/projects/shell-browser:__subpackages__",
-        "//modules/playground:__subpackages__",
-    ],
-)
diff --git a/third_party/github.com/google/material-design-icons/LOCAL_MODS.md b/third_party/github.com/google/material-design-icons/LOCAL_MODS.md
deleted file mode 100644
index 315d84caff1..00000000000
--- a/third_party/github.com/google/material-design-icons/LOCAL_MODS.md
+++ /dev/null
@@ -1 +0,0 @@
-- `material-icons.css` has been modified to only load the `truetype` icons font.
\ No newline at end of file
diff --git a/third_party/github.com/google/material-design-icons/MaterialIcons-Regular.ttf b/third_party/github.com/google/material-design-icons/MaterialIcons-Regular.ttf
deleted file mode 100644
index 5d0494ade95..00000000000
Binary files a/third_party/github.com/google/material-design-icons/MaterialIcons-Regular.ttf and /dev/null differ