angular · milomg · May 12, 2025
diff --git a/devtools/projects/demo-standalone/src/BUILD.bazel b/devtools/projects/demo-standalone/src/BUILD.bazel
@@ -75,6 +75,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
@@ -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
@@ -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
@@ -19,6 +19,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;
 
@@ -55,7 +56,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);
   rea
8000
donly angularVersion = signal<string | undefined>(undefined);
@@ -81,9 +82,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) {
@@ -92,13 +91,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, supportedApis}) => {
       this.angularStatus.set(version ? AngularStatus.EXISTS : AngularStatus.DOES_NOT_EXIST);
@@ -111,6 +107,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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -78,6 +78,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
@@ -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
@@ -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
@@ -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/....com/google/material-design-icons/LICENSE → ...gle.com/material-symbols-outlined/LICENSE b/....com/google/material-design-icons/LICENSE → ...gle.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
@@ -0,0 +1 @@
+- `outlined.css` has been modified to only declare `font-weight: 400`
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
diff --git a/.../material-design-icons/material-icons.css → ...om/material-symbols-outlined/outlined.css b/.../material-design-icons/material-icons.css → ...om/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
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
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
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		- `outlined.css` has been modified to only declare `font-weight: 400`