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 = [
+ '',
+ '',
+ ];
+
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, ``);
});
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(
+ ' ',
+ );
+ expect(htmlContent).toContain(
+ ' ',
+ );
expect(htmlContent).toContain(
'