From 9a5453146b799ac6b98e33117fec90c3d917e8ee Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 11 Sep 2026 09:29:00 +0200 Subject: [PATCH] docs: update documentation to use Material Symbols Updates all the docs to use the Material Symbols icon set instead of the deprecated Material Icons. Relates to #24845. --- docs/src/assets/stackblitz/src/index.html | 2 +- guides/getting-started.md | 2 +- guides/schematics.md | 2 +- src/material/button/button.md | 9 +++++---- src/material/button/fab.scss | 2 +- src/material/icon/icon.md | 12 ++++++------ src/material/icon/icon.ts | 14 ++++++++------ 7 files changed, 23 insertions(+), 20 deletions(-) diff --git a/docs/src/assets/stackblitz/src/index.html b/docs/src/assets/stackblitz/src/index.html index e928809f11ff..bf56180a51e6 100644 --- a/docs/src/assets/stackblitz/src/index.html +++ b/docs/src/assets/stackblitz/src/index.html @@ -7,7 +7,7 @@ - + diff --git a/guides/getting-started.md b/guides/getting-started.md index 259fd0b5dfde..7d430989ec29 100644 --- a/guides/getting-started.md +++ b/guides/getting-started.md @@ -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` diff --git a/guides/schematics.md b/guides/schematics.md index a608c0395264..008b9b55fd51 100644 --- a/guides/schematics.md +++ b/guides/schematics.md @@ -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` diff --git a/src/material/button/button.md b/src/material/button/button.md index bd7b8f4238ee..bfd619332a3d 100644 --- a/src/material/button/button.md +++ b/src/material/button/button.md @@ -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 ``` -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