From 1371cf6d33d2b9214dba7260677ef9de60213d9b Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Tue, 27 Nov 2018 00:20:32 +0200
Subject: [PATCH] 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 |  7 +++++++
 aio/src/app/app.module.ts      | 12 ------------
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html
index 68402de045..fde39a7a93 100644
--- a/aio/src/app/app.component.html
+++ b/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>
diff --git a/aio/src/app/app.module.ts b/aio/src/app/app.module.ts
index 014b6208cd..8e604d2696 100644
--- a/aio/src/app/app.module.ts
+++ b/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: {