From 782358cac1e8bb1d55fb166ca03e26a6d7b1e469 Mon Sep 17 00:00:00 2001
From: SkyZeroZx <73321943+SkyZeroZx@users.noreply.github.com>
Date: Sun, 2 Nov 2025 18:21:56 -0500
Subject: [PATCH] feat(material/schematics): add preconnect links for Google
 Fonts in index.html

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
---
 src/material/schematics/ng-add/fonts/material-fonts.ts | 8 ++++++++
 src/material/schematics/ng-add/index.spec.ts           | 6 ++++++
 2 files changed, 14 insertions(+)

diff --git a/src/material/schematics/ng-add/fonts/material-fonts.ts b/src/material/schematics/ng-add/fonts/material-fonts.ts
index 09b959387850..c6f70f9dd5cb 100644
--- a/src/material/schematics/ng-add/fonts/material-fonts.ts
+++ b/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">`);
       });
diff --git a/src/material/schematics/ng-add/index.spec.ts b/src/material/schematics/ng-add/index.spec.ts
index 9101f6a017c9..5af909f5ac03 100644
--- a/src/material/schematics/ng-add/index.spec.ts
+++ b/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"',
       );