Skip to content

docs: update documentation to use Material Symbols #33796

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
crisbeto merged 1 commit into from
Sep 12, 2026
Merged

docs: update documentation to use Material Symbols #33796

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/src/assets/stackblitz/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet">
</head>
<body class="mat-typography mat-app-background">
<material-docs-example></material-docs-example>
Expand Down
2 changes: 1 addition & 1 deletion guides/getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ The `ng add` command will additionally perform the following actions:

* Add project dependencies to `package.json`
* Add the Roboto font to your `index.html`
* Add the Material Design icon font to your `index.html`
* Add the [Material Symbols icon font](https://fonts.google.com/icons) to your `index.html`
* Add a few global CSS styles to:
* Remove margins from `body`
* Set `height: 100%` on `html` and `body`
Expand Down
2 changes: 1 addition & 1 deletion guides/schematics.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ The Angular Material `ng add` schematic helps you set up an Angular CLI project
- Ensure [project dependencies](./getting-started#step-1-install-angular-material-angular-cdk-and-angular-animations) are placed in `package.json`
- Add either a prebuilt theme or a custom theme
- Add Roboto fonts to your `index.html`
- Add the [Material Icon font](./getting-started#step-6-optional-add-material-icons) to your `index.html`
- Add the [Material Symbols icon font](https://fonts.google.com/icons) to your `index.html`
- Add global styles to
- Remove margins from `body`
- Set `height: 100%` on `html` and `body`
Expand Down
9 changes: 5 additions & 4 deletions src/material/button/button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,9 @@ the `extended` attribute, mini FABs do not.

### Icon positioning

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

```html
<button matButton>
Expand Down Expand Up @@ -74,8 +75,8 @@ You can also use both positions at once:
</button>
```

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

```html
<button matButton>
Expand Down
2 changes: 1 addition & 1 deletion src/material/button/fab.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ $indicator-offset: calc(#{$border-width} + 2px);

// MDC expects the fab icon to contain this HTML content:
// ```html
// <span class="mdc-fab__icon material-icons">favorite</span>
// <span class="mdc-fab__icon material-symbols-outlined">favorite</span>
// ```
// However, Angular Material expects a `mat-icon` instead. The following
// mixin will style the icons appropriately.
Expand Down
12 changes: 6 additions & 6 deletions src/material/icon/icon.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,14 @@ Some fonts are designed to show icons by using
component.

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

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

### Font icons with CSS

Expand Down
14 changes: 8 additions & 6 deletions src/material/icon/icon.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,15 +110,17 @@ const funcIriPattern = /^url\(['"]?#(.*?)['"]?\)$/;
* content of the `<mat-icon>` component. If you register a custom font class, don't forget to also
* include the special class `mat-ligature-font`. It is recommended to use the attribute alternative
* to prevent the ligature text to be selectable and to appear in search engine results.
* By default, the Material icons font is used as described at
* http://google.github.io/material-design-icons/#icon-font-for-the-web. You can specify an
* alternate font by setting the fontSet input to either the CSS class to apply to use the
* desired font, or to an alias previously registered with MatIconRegistry.registerFontClassAlias.
* By default, the Material Icons or Material Symbols fonts are used as described at
* https://fonts.google.com/icons. You can specify an alternate font by setting the `fontSet`
* input to either the CSS class to apply to use the desired font, or to an alias previously
* registered with `MatIconRegistry.registerFontClassAlias`.
* Examples:
* `<mat-icon fontIcon="home"></mat-icon>
* ```html
* <mat-icon fontIcon="home"></mat-icon>
* <mat-icon>home</mat-icon>
* <mat-icon fontSet="myfont" fontIcon="sun"></mat-icon>
* <mat-icon fontSet="myfont">sun</mat-icon>`
* <mat-icon fontSet="myfont">sun</mat-icon>
* ```
*
* - Specify a font glyph to be included via CSS rules by setting the fontSet input to specify the
* font, and the fontIcon input to specify the icon. Typically the fontIcon will specify a
Expand Down
Loading