fix(docs-infra): ensure material icons are cached for offline access (#27250)

In order for 'Material Icons' to work offline, their `.woff2` file needs
to have been cached by the SW. This file is not requested by the
browser, until an element needs to use the icon font.

In order to speed up the initial page load and avoid FOUC, we use
inlined SVGs for all icons in the app shell. As a result, the `.woff2`
file may not be requested, when a user visits angular.io. If they go
offline before visiting a page that does actually use 'Material Icons',
then such icons will not work correctly (e.g. the `error_outline` icon
used in the error page for failed requests due to network
unanvailability).

This commit fixes this, by adding a non-visible element that needs the
'Material Icons' font on the main component. Thids ensures that the
`.woff2` file will always be loaded, even if the page does not use any
material icons.

(Note: The element is inserted lazily to avoid affecting the initial
rendering.)

PR Close #27250

aio/src/app/app.component.html

@@ -74,3 +74,10 @@
   <aio-footer [nodes]="footerNodes" [versionInfo]="versionInfo" ></aio-footer>
 </footer>
 
+<!--
+  Work-around to ensure that the `.woff2` file for the 'Material Icons' font will always be fetched.
+  This allows the SW to cache the file (even if there are no icons in the current page) and ensure
+  material icons on other pages are displayed correctly in offline mode.
+  (Note: Instantiate lazily to avoid affecting the initial rendering.)
+-->
+<mat-icon class="cdk-visually-hidden" *ngIf="!isStarting">&nbsp;</mat-icon>

aio/src/app/app.module.ts

@@ -58,18 +58,6 @@ export const svgIconProviders = [
     },
     multi: true,
   },
-  {
-    provide: SVG_ICONS,
-    useValue: {
-      name: 'error_outline',
-      svgSource:
-        '<svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">' +
-          '<path d="M0 0h24v24H0V0z" fill="none" />' +
-          '<path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />' +
-        '</svg>',
-    },
-    multi: true,
-  },
   {
     provide: SVG_ICONS,
     useValue: {