8000 refactor(devtools): switch default font to material symbols · angular/angular@82a5660 · GitHub
[go: up one dir, main page]
Skip to content

Commit 82a5660

Browse files
milomgmilomg
committed
refactor(devtools): switch default font to material symbols
update from Material Icons to Material Symbols, and use the local font copy instead of Google fonts to avoid version mismatches
1 parent 3c9b8d9 commit 82a5660

File tree

21 files changed

+77
-55
lines changed

21 files changed

+77
-55
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
":demo_styles",
7676
":index.html",
7777
"//packages/zone.js/bundles:zone.umd.js",
78+
"//devtools/projects/demo-standalone/src/assets",
7879
],
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=&q 9E88 uot;/" />
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: 3 additions & 0 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

@@ -84,6 +85,7 @@ export class DevToolsComponent implements OnInit, OnDestroy {
8485
private readonly _themeService = inject(ThemeService);
8586
private readonly _frameManager = inject(FrameManager);
8687
private readonly _browserStyles = inject(BrowserStylesService);
88+
private readonly _matIconRegistry = inject(MatIconRegistry);
8789

8890
private _interval$ = interval(500).subscribe((attempt) => {
8991
if (attempt === DETECT_ANGULAR_ATTEMPTS) {
@@ -99,6 +101,7 @@ export class DevToolsComponent implements OnInit, OnDestroy {
99101
ngOnInit(): void {
100102
this._themeService.initializeThemeWatcher();
101103
this._browserStyles.initBrowserSpecificStyles();
104+
this._matIconRegistry.setDefaultFontSetClass('material-symbols-outlined');
102105

103106
this._messageBus.once('ngAvailability', ({version, devMode, ivy, hydration, supportedApis}) => {
104107
this.angularStatus.set(version ? AngularStatus.EXISTS : AngularStatus.DOES_NOT_EXIST);

‎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 4262 use DevTools with Angular v12+</p>
6666
</section>
6767
</div>

0 commit comments

Comments
 (0)
0