build: switch infra to material symbols (#33798)

Switches the various infrastructure apps to use Material Symbols instead of Material Icons.

Relates to #24845.

Author: crisbeto

integration/yarn-pnp-compat/src/index.html

@@ -8,7 +8,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/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">
   <app-root></app-root>

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

@@ -18,7 +18,7 @@ import {
   DOCUMENT,
 } from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
-import {MatIconModule, MatIconRegistry} from '@angular/material/icon';
+import {MatIconModule} from '@angular/material/icon';
 import {MatListModule} from '@angular/material/list';
 import {MatSidenavModule} from '@angular/material/sidenav';
 import {MatToolbarModule} from '@angular/material/toolbar';
@@ -52,7 +52,6 @@ export class DevAppLayout {
   private _dir = inject(Directionality) as DevAppDirectionality;
   private _changeDetectorRef = inject(ChangeDetectorRef);
   private _document = inject(DOCUMENT);
-  private _iconRegistry = inject(MatIconRegistry);
   private _route = inject(ActivatedRoute);
 
   state = getAppState();
@@ -227,10 +226,6 @@ export class DevAppLayout {
         ? 'theme-m3.css'
         : 'theme.css';
     }
-
-    this._iconRegistry.setDefaultFontSetClass(
-      value ? 'material-symbols-outlined' : 'material-icons',
-    );
     this.state.m3Enabled = value;
     setAppState(this.state);
   }

src/dev-app/index.html

@@ -8,7 +8,6 @@
 
     <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"

src/e2e-app/index.html

@@ -7,7 +7,7 @@
     <base href="/" />
 
     <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"

src/universal-app/index-source.html

@@ -6,7 +6,7 @@
     <title>Angular Material Universal Kitchen Sink Test</title>
     <link href="styles.css" rel="stylesheet" />
     <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"