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 @@
   <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>
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
 <button matButton>
@@ -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>
diff --git a/src/material/button/fab.scss b/src/material/button/fab.scss
index 269a1abb0966..b034a6a837d2 100644
--- a/src/material/button/fab.scss
+++ b/src/material/button/fab.scss
@@ -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.
diff --git a/src/material/icon/icon.md b/src/material/icon/icon.md
index 87df3223232c..961dd705dc68 100644
--- a/src/material/icon/icon.md
+++ b/src/material/icon/icon.md
@@ -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
 
diff --git a/src/material/icon/icon.ts b/src/material/icon/icon.ts
index e94f4cb6716d..4d2708f1e1d2 100644
--- a/src/material/icon/icon.ts
+++ b/src/material/icon/icon.ts
@@ -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
