Skip to content

Commit 650bac5

Browse files
milomgthePunderWoman
milomg
authored and
thePunderWoman
committed
refactor(devtools): switch default font to material symbols (angular#61281)
update from Material Icons to Material Symbols, and use the local font copy instead of Google fonts to avoid version mismatches PR Close angular#61281
1 parent d12844e commit 650bac5

File tree

21 files changed

+84
-65
lines changed

21 files changed

+84
-65
lines changed

‎devtools/projects/demo-standalone/src/BUILD.bazel‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ filegroup(
7575
":browser_specific_styles",
7676
":demo_styles",
7777
":index.html",
78+
"//devtools/projects/demo-standalone/src/assets",
7879
"//packages/zone.js/bundles:zone.umd.js",
7980
],
8081
)

‎devtools/projects/demo-standalone/src/assets/BUILD.bazel‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
package(default_visibility = ["//:__subpackages__"])
2+
3+
filegroup(
4+
name = "assets",
5+
srcs = [
6+
"//third_party/fonts.google.com/material-symbols-outlined",
7+
"//third_party/fonts.google.com/material-symbols-outlined:LICENSE",
8+
],
9+
)

‎devtools/projects/demo-standalone/src/index.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@
66
<base href="/" />
77
<meta name="viewport" content="width=device-width, initial-scale=1" />
88
<link rel="icon" type="image/x-icon" href="assets/icon16.png" />
9-
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
9+
<link
10+
rel="stylesheet"
11+
href="../third_party/fonts.google.com/material-symbols-outlined/outlined.css"
12+
/>
1013

1114
<link rel="stylesheet" href="./styles.css" />
1215
</head>

‎devtools/projects/ng-devtools/src/lib/devtools.component.ts‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
1919
import {Frame} from './application-environment';
2020
import {BrowserStylesService} from './application-services/browser_styles_service';
2121
import {WINDOW_PROVIDER} from './application-providers/window_provider';
22+
import {MatIconRegistry} from '@angular/material/icon';
2223

2324
const DETECT_ANGULAR_ATTEMPTS = 10;
2425

@@ -55,7 +56,7 @@ const LAST_SUPPORTED_VERSION = 9;
5556
imports: [DevToolsTabsComponent, MatTooltip, MatProgressSpinnerModule, MatTooltipModule],
5657
providers: [WINDOW_PROVIDER, ThemeService],
5758
})
58-
export class DevToolsComponent implements OnInit, OnDestroy {
59+
export class DevToolsComponent implements OnDestroy {
5960
readonly AngularStatus = AngularStatus;
6061
readonly angularStatus = signal(AngularStatus.UNKNOWN);
6162
readonly angularVersion = signal<string | undefined>(undefined);
@@ -81,9 +82,7 @@ export class DevToolsComponent implements OnInit, OnDestroy {
8182
});
8283

8384
private readonly _messageBus = inject<MessageBus<Events>>(MessageBus);
84-
private readonly _themeService = inject(ThemeService);
8585
private readonly _frameManager = inject(FrameManager);
86-
private readonly _browserStyles = inject(BrowserStylesService);
8786

8887
private _interval$ = interval(500).subscribe((attempt) => {
8988
if (attempt === DETECT_ANGULAR_ATTEMPTS) {
@@ -92,13 +91,10 @@ export class DevToolsComponent implements OnInit, OnDestroy {
9291
this._messageBus.emit('queryNgAvailability');
9392
});
9493

95-
inspectFrame(frame: Frame) {
96-
this._frameManager.inspectFrame(frame);
97-
}
98-
99-
ngOnInit(): void {
100-
this._themeService.initializeThemeWatcher();
101-
this._browserStyles.initBrowserSpecificStyles();
94+
constructor() {
95+
inject(ThemeService).initializeThemeWatcher();
96+
inject(BrowserStylesService).initBrowserSpecificStyles();
97+
inject(MatIconRegistry).setDefaultFontSetClass('material-symbols-outlined');
10298

10399
this._messageBus.once('ngAvailability', ({version, devMode, ivy, hydration, supportedApis}) => {
104100
this.angularStatus.set(version ? AngularStatus.EXISTS : AngularStatus.DOES_NOT_EXIST);
@@ -111,6 +107,10 @@ export class DevToolsComponent implements OnInit, OnDestroy {
111107
});
112108
}
113109

110+
inspectFrame(frame: Frame) {
111+
this._frameManager.inspectFrame(frame);
112+
}
113+
114114
ngOnDestroy(): void {
115115
this._interval$.unsubscribe();
116116
}

‎devtools/projects/shell-browser/src/assets/BUILD.bazel‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ filegroup(
77
"**/*.png",
88
"*.css",
99
]) + [
10-
"//third_party/github.com/google/material-design-icons",
11-
"//third_party/github.com/google/material-design-icons:LICENSE",
10+
"//third_party/fonts.google.com/material-symbols-outlined",
11+
"//third_party/fonts.google.com/material-symbols-outlined:LICENSE",
1212
],
1313
)

‎devtools/projects/shell-browser/src/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<link rel="icon" type="image/x-icon" href="assets/icon16.png" />
99
<link
1010
rel="stylesheet"
11-
href="./third_party/github.com/google/material-design-icons/material-icons.css"
11+
href="./third_party/fonts.google.com/material-symbols-outlined/outlined.css"
1212
/>
1313
<link rel="stylesheet" href="./styles.css" />
1414
</head>

‎devtools/projects/shell-browser/src/popups/not-angular.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<html>
22
<head>
33
<link
4-
href="../third_party/github.com/google/material-design-icons/material-icons.css"
4+
href="../third_party/fonts.google.com/material-symbols-outlined/outlined.css"
55
rel="stylesheet"
66
/>
77
<style>
@@ -41,7 +41,7 @@
4141
margin-bottom: 10px;
4242
}
4343

44-
.material-icons {
44+
.material-symbols-outlined {
4545
color: rgb(107, 107, 107);
4646
margin-right: 7px;
4747
}
@@ -52,7 +52,7 @@
5252
<div class="modal-content">
5353
<h4 class="header-text">Angular DevTools</h4>
5454
<div class="message">
55-
<span class="material-icons md-48">cancel</span>
55+
<span class="material-symbols-outlined md-48">cancel</span>
5656
<p>This page is not using Angular, or it has a strict extension policy.</p>
5757
</div>
5858
</div>

‎devtools/projects/shell-browser/src/popups/production.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<html>
22
<head>
33
<link
4-
href="../third_party/github.com/google/material-design-icons/material-icons.css"
4+
href="../third_party/fonts.google.com/material-symbols-outlined/outlined.css"
55
rel="stylesheet"
66
/>
77
<style>
@@ -41,7 +41,7 @@
4141
margin-bottom: 10px;
4242
}
4343

44-
.material-icons {
44+
.material-symbols-outlined {
4545
color: rgb(107, 107, 107);
4646
margin-right: 10px;
4747
}
@@ -52,7 +52,7 @@
5252
<div class="modal-content">
5353
<h4 class="header-text">Angular DevTools</h4>
5454
<div class="message">
55-
<span class="material-icons md-48">settings</span>
55+
<span class="material-symbols-outlined md-48">settings</span>
5656
<section>
5757
<p>
5858
Angular application running in

‎devtools/projects/shell-browser/src/popups/supported.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<html>
22
<head>
33
<link
4-
href="../third_party/github.com/google/material-design-icons/material-icons.css"
4+
href="../third_party/fonts.google.com/material-symbols-outlined/outlined.css"
55
rel="stylesheet"
66
/>
77
<style>
@@ -48,7 +48,7 @@
4848
margin-bottom: 10px;
4949
}
5050

51-
.material-icons {
51+
.material-symbols-outlined {
5252
color: rgb(107, 107, 107);
5353
margin-right: 7px;
5454
}
@@ -60,12 +60,12 @@
6060
<h4 class="header-text">Angular DevTools</h4>
6161
<div class="message">
6262
<section class="section-content">
63-
<span class="material-icons md-48">check</span>
63+
<span class="material-symbols-outlined md-48">check</span>
6464
<p>Angular application running development mode.</p>
6565
</section>
6666
<br />
6767
<section class="section-content">
68-
<span class="material-icons md-48">settings</span>
68+
<span class="material-symbols-outlined md-48">settings</span>
6969
<p>Open developer tools, and select the Angular tab.</p>
7070
</section>
7171
</div>

‎devtools/projects/shell-browser/src/popups/unsupported.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<html>
22
<head>
33
<link
4-
href="../third_party/github.com/google/material-design-icons/material-icons.css"
4+
href="../third_party/fonts.google.com/material-symbols-outlined/outlined.css"
55
rel="stylesheet"
66
/>
77
<style>
@@ -45,7 +45,7 @@
4545
margin-bottom: 10px;
4646
}
4747

48-
.material-icons {
48+
.material-symbols-outlined {
4949
color: rgb(107, 107, 107);
5050
margin-right: 7px;
5151
}
@@ -57,11 +57,11 @@
5757
<h4 class="header-text">Angular DevTools</h4>
5858
<div class="message">
5959
<section>
60-
<span class="material-icons md-48">check</span>
60+
<span class="material-symbols-outlined md-48">check</span>
6161
<p>This page is using Angular.</p>
6262
</section>
6363
<section>
64-
<span class="material-icons md-48">settings</span>
64+
<span class="material-symbols-outlined md-48">settings</span>
6565
<p>You can use DevTools with Angular v12+</p>
6666
</section>
6767
</div>

0 commit comments

Comments
 (0)