docs(material/icon): add guidance for Material Symbols (#28436)

(cherry picked from commit 0cf81f3)

Author: andrewseguin

src/dev-app/dev-app/dev-app-layout.ts

@@ -13,7 +13,7 @@ import {MatSidenavModule} from '@angular/material/sidenav';
 import {MatListModule} from '@angular/material/list';
 import {MatButtonModule} from '@angular/material/button';
 import {RouterModule} from '@angular/router';
-import {MatIconModule} from '@angular/material/icon';
+import {MatIconModule, MatIconRegistry} from '@angular/material/icon';
 import {MatToolbarModule} from '@angular/material/toolbar';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {DevAppDirectionality} from './dev-app-directionality';
@@ -110,12 +110,14 @@ export class DevAppLayout {
     @Inject(Directionality) private _dir: DevAppDirectionality,
     private _changeDetectorRef: ChangeDetectorRef,
     @Inject(DOCUMENT) private _document: Document,
+    private _iconRegistry: MatIconRegistry,
   ) {
     this.toggleTheme(this.state.darkTheme);
     this.toggleStrongFocus(this.state.strongFocusEnabled);
     this.toggleDensity(Math.max(this._densityScales.indexOf(this.state.density), 0));
     this.toggleRippleDisabled(this.state.rippleDisabled);
     this.toggleDirection(this.state.direction);
+    this.toggleM3(this.state.m3Enabled);
   }
 
   toggleTheme(value = !this.state.darkTheme) {
@@ -168,9 +170,13 @@ export class DevAppLayout {
       (document.getElementById('theme-styles') as HTMLLinkElement).href = value
         ? 'theme-m3.css'
         : 'theme.css';
-      this.state.m3Enabled = value;
-      setAppState(this.state);
     }
+
+    this._iconRegistry.setDefaultFontSetClass(
+      value ? 'material-symbols-outlined' : 'material-icons',
+    );
+    this.state.m3Enabled = value;
+    setAppState(this.state);
   }
 
   getDensityClass() {

src/dev-app/index.html

@@ -9,6 +9,7 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <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">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
 
   <!-- FontAwesome for mat-icon demo. -->

src/material/icon/icon.md

@@ -19,9 +19,12 @@ component.
 By default, `<mat-icon>` expects the
 [Material icons font](https://google.github.io/material-design-icons/#icon-font-for-the-web).
 (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 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`.
+
+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`.
 
 ### Font icons with CSS