skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(devtools): switch default font to material symbols (#61281)

Browse Source 
update from Material Icons to Material Symbols, and use the local
font copy instead of Google fonts to avoid version mismatches

PR Close #61281
This commit is contained in:
Milo
2025-05-12 17:21:27 +00:00
committed by Jessica Janiuk
parent 71989056d8
commit dbd66ec46b
21 changed files with 84 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
devtools/projects/demo-standalone/src/BUILD.bazel
+1
View File
@@ -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",
],
)
devtools/projects/demo-standalone/src/assets/BUILD.bazel
+9
View File
@@ -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",
],
)
devtools/projects/demo-standalone/src/index.html
+4 -1
View File
@@ -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>
devtools/projects/ng-devtools/src/lib/devtools.component.ts
+10 -10
View File
@@ -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();
}
devtools/projects/shell-browser/src/assets/BUILD.bazel
+2 -2
View File
@@ -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",
],
)
devtools/projects/shell-browser/src/index.html
+1 -1
View File
@@ -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>
devtools/projects/shell-browser/src/popups/not-angular.html
+3 -3
View File
@@ -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>
devtools/projects/shell-browser/src/popups/production.html
+3 -3
View File
@@ -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
devtools/projects/shell-browser/src/popups/supported.html
+4 -4
View File
@@ -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>
devtools/projects/shell-browser/src/popups/unsupported.html
+4 -4
View File
@@ -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>
devtools/src/BUILD.bazel
+1
View File
@@ -65,6 +65,7 @@ filegroup(
":browser_specific_styles",
":demo_styles",
":index.html",
"//devtools/src/assets",
"//packages/zone.js/bundles:zone.umd.js",
],
)
devtools/src/assets/BUILD.bazel
+9
View File
@@ -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",
],
)
devtools/src/index.html
+4 -1
View File
@@ -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>
third_party/fonts.google.com/material-symbols-outlined/BUILD.bazel
Vendored
+19
View File
@@ -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__",
],
)
third_party/github.com/google/material-design-icons/LICENSE → third_party/fonts.google.com/material-symbols-outlined/LICENSE
Vendored
View File
third_party/fonts.google.com/material-symbols-outlined/LOCAL_MODS.md
Vendored
+1
View File
@@ -0,0 +1 @@
- `outlined.css` has been modified to only declare `font-weight: 400`
third_party/fonts.google.com/material-symbols-outlined/material-symbols-outlined.woff2
Vendored
BIN
View File
Binary file not shown.
third_party/github.com/google/material-design-icons/material-icons.css → third_party/fonts.google.com/material-symbols-outlined/outlined.css
Vendored
+9 -16
View File
@@ -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';
}
third_party/github.com/google/material-design-icons/BUILD.bazel
Vendored
-19
View File
@@ -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__",
],
)
third_party/github.com/google/material-design-icons/LOCAL_MODS.md
Vendored
-1
View File
@@ -1 +0,0 @@
- `material-icons.css` has been modified to only load the `truetype` icons font.
third_party/github.com/google/material-design-icons/MaterialIcons-Regular.ttf
Vendored
BIN
View File
Binary file not shown.