feat(material/schematics): add preconnect links for Google Fonts in index.html (#32238)

Add `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>` and `<link rel="preconnect" href="https://fonts.googleapis.com">` hints to the generated index.html to improve font load performance

Author: SkyZeroZx

src/material/schematics/ng-add/fonts/material-fonts.ts

@@ -26,12 +26,20 @@ export function addFontsToIndex(options: Schema): Rule {
       throw new SchematicsException('No project index HTML file could be found.');
     }
 
+    const preconnectLinks = [
+      '<link rel="preconnect" href="https://fonts.googleapis.com">',
+      '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>',
+    ];
+
     const fonts = [
       'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap',
       'https://fonts.googleapis.com/icon?family=Material+Icons',
     ];
 
     projectIndexFiles.forEach(indexFilePath => {
+      preconnectLinks.forEach(link => {
+        appendHtmlElementToHead(host, indexFilePath, link);
+      });
       fonts.forEach(font => {
         appendHtmlElementToHead(host, indexFilePath, `<link href="${font}" rel="stylesheet">`);
       });

src/material/schematics/ng-add/index.spec.ts

@@ -144,6 +144,12 @@ describe('ng-add schematic', () => {
       // Ensure that the indentation has been determined properly. We want to make sure that
       // the created links properly align with the existing HTML. Default CLI projects use an
       // indentation of two columns.
+      expect(htmlContent).toContain(
+        '  <link rel="preconnect" href="https://fonts.googleapis.com">',
+      );
+      expect(htmlContent).toContain(
+        '  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>',
+      );
       expect(htmlContent).toContain(
         '  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"',
       );