Skip to content

Commit 7e73582

Browse files
crisbetocrisbeto
authored
docs: update documentation to use Material Symbols (#33796)
Updates all the docs to use the Material Symbols icon set instead of the deprecated Material Icons. Relates to #24845.
1 parent aad74d3 commit 7e73582

7 files changed

Lines changed: 23 additions & 20 deletions

File tree

‎docs/src/assets/stackblitz/src/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1">
88
<link rel="preconnect" href="https://fonts.gstatic.com">
99
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
10-
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
10+
<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet">
1111
</head>
1212
<body class="mat-typography mat-app-background">
1313
<material-docs-example></material-docs-example>

‎guides/getting-started.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ The `ng add` command will additionally perform the following actions:
2828

2929
* Add project dependencies to `package.json`
3030
* Add the Roboto font to your `index.html`
31-
* Add the Material Design icon font to your `index.html`
31+
* Add the [Material Symbols icon font](https://fonts.google.com/icons) to your `index.html`
3232
* Add a few global CSS styles to:
3333
* Remove margins from `body`
3434
* Set `height: 100%` on `html` and `body`

‎guides/schematics.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ The Angular Material `ng add` schematic helps you set up an Angular CLI project
2525
- Ensure [project dependencies](./getting-started#step-1-install-angular-material-angular-cdk-and-angular-animations) are placed in `package.json`
2626
- Add either a prebuilt theme or a custom theme
2727
- Add Roboto fonts to your `index.html`
28-
- Add the [Material Icon font](./getting-started#step-6-optional-add-material-icons) to your `index.html`
28+
- Add the [Material Symbols icon font](https://fonts.google.com/icons) to your `index.html`
2929
- Add global styles to
3030
- Remove margins from `body`
3131
- Set `height: 100%` on `html` and `body`

‎src/material/button/button.md‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,9 @@ the `extended` attribute, mini FABs do not.
4545

4646
### Icon positioning
4747

48-
Buttons can contain icons alongside text. By default, icons (`mat-icon`, `.material-icons`, or
49-
elements with the `matButtonIcon` attribute) are projected **before** the button label.
48+
Buttons can contain icons alongside text. By default, icons (`.material-icons`, `mat-icon`,
49+
`.material-symbols-outlined`, `.material-symbols-rounded`, `.material-symbols-sharp` or elements
50+
with the `matButtonIcon` attribute) are projected **before** the button label.
5051

5152
```html
5253
<button matButton>
@@ -74,8 +75,8 @@ You can also use both positions at once:
7475
</button>
7576
```
7677

77-
If you are using a custom icon element that is not a `mat-icon` or `.material-icons`, add the
78-
`matButtonIcon` attribute so that the button can project it into the correct slot:
78+
If you are using a custom icon element that does not use the `Material Symbols` or `Material Icons`
79+
set, add the `matButtonIcon` attribute so that the button can project it into the correct slot:
7980

8081
```html
8182
<button matButton>

‎src/material/button/fab.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ $indicator-offset: calc(#{$border-width} + 2px);
7272

7373
// MDC expects the fab icon to contain this HTML content:
7474
// ```html
75-
// <span class="mdc-fab__icon material-icons">favorite</span>
75+
// <span class="mdc-fab__icon material-symbols-outlined">favorite</span>
7676
// ```
7777
// However, Angular Material expects a `mat-icon` instead. The following
7878
// mixin will style the icons appropriately.

‎src/material/icon/icon.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,14 @@ Some fonts are designed to show icons by using
1717
component.
1818

1919
By default, `<mat-icon>` expects the
20-
[Material icons font](https://google.github.io/material-design-icons/#icon-font-for-the-web).
20+
[Material Symbols font](https://fonts.google.com/icons).
2121
(You will still need to include the HTML to load the font and its CSS, as described in the link).
2222

23-
You can specify a different font, such as Material's latest icons,
24-
[Material Symbols](https://fonts.google.com/icons), by setting the `fontSet` input to either the
25-
CSS class to apply to use the desired font, or to an alias previously registered with
26-
`MatIconRegistry.registerFontClassAlias`. Alternatively you can set the default for all
27-
your application's icons using `MatIconRegistry.setDefaultFontSetClass`.
23+
You can specify a different font, such as the legacy
24+
[Material Icons](https://google.github.io/material-design-icons/#icon-font-for-the-web), by setting
25+
the `fontSet` input to either the CSS class to apply to use the desired font, or to an alias
26+
previously registered with `MatIconRegistry.registerFontClassAlias`. Alternatively you can set the
27+
default for all your application's icons using `MatIconRegistry.setDefaultFontSetClass`.
2828

2929
### Font icons with CSS
3030

‎src/material/icon/icon.ts‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -110,15 +110,17 @@ const funcIriPattern = /^url\(['"]?#(.*?)['"]?\)$/;
110110
* content of the `<mat-icon>` component. If you register a custom font class, don't forget to also
111111
* include the special class `mat-ligature-font`. It is recommended to use the attribute alternative
112112
* to prevent the ligature text to be selectable and to appear in search engine results.
113-
* By default, the Material icons font is used as described at
114-
* http://google.github.io/material-design-icons/#icon-font-for-the-web. You can specify an
115-
* alternate font by setting the fontSet input to either the CSS class to apply to use the
116-
* desired font, or to an alias previously registered with MatIconRegistry.registerFontClassAlias.
113+
* By default, the Material Icons or Material Symbols fonts are used as described at
114+
* https://fonts.google.com/icons. You can specify an alternate font by setting the `fontSet`
115+
* input to either the CSS class to apply to use the desired font, or to an alias previously
116+
* registered with `MatIconRegistry.registerFontClassAlias`.
117117
* Examples:
118-
* `<mat-icon fontIcon="home"></mat-icon>
118+
* ```html
119+
* <mat-icon fontIcon="home"></mat-icon>
119120
* <mat-icon>home</mat-icon>
120121
* <mat-icon fontSet="myfont" fontIcon="sun"></mat-icon>
121-
* <mat-icon fontSet="myfont">sun</mat-icon>`
122+
* <mat-icon fontSet="myfont">sun</mat-icon>
123+
* ```
122124
*
123125
* - Specify a font glyph to be included via CSS rules by setting the fontSet input to specify the
124126
* font, and the fontIcon input to specify the icon. Typically the fontIcon will specify a

0 commit comments

Comments
 (0)