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( '