fix(aio): use SVG icons for page load sensitive UI

The side nav and menu buttons need to appear early on in the loading of the page.
Currently we are using icon fonts with ligatures to get icons for these areas.
This can result in a flash of unstyled font.

By replacing these with SVG icons, we get a better user experience.
By overriding the `MdIconRegistry` we can inline the SVG source, which
means that there will never by a delay in rendering the icons.

The new `CustomMdIconRegistry` expects a multi-provider containing an array
of `SvgIconInfo` objects. These objects hold the name and SVG source of the
icon. When `MdIconComponent` requests an SVG icon we will get it from the
pre-loading cache, if available, before delegating back to the original
`MdIconRegistry`.

Note that SVG versions of `md-icon` do not apply the `material-icons` CSS
class to the element, so the styling for the icons that we are preloading
has been changed to use `.mat-icon` instead.

Closes #16100

aio/src/styles/1-layouts/_sidenav.scss

@@ -58,7 +58,7 @@ md-sidenav-container div.mat-sidenav-content {
   }
 
   //icons _within_ nav
-  .material-icons {
+  .mat-icon {
     position: absolute;
     top: 6px;
     margin-left: 10px;
@@ -83,11 +83,12 @@ md-sidenav-container div.mat-sidenav-content {
   width: 100%;
 }
 
-.material-icons {
+.mat-icon {
   display: inline-block;
   position: absolute;
   top: 6px;
   right: 8px;
+  color: $mediumgray;
 }
 
 .heading-children.expanded {
@@ -138,11 +139,11 @@ a.selected.level-1,
   padding-left: 30px;
 }
 
-.level-1.expanded .material-icons, .level-2.expanded .material-icons {
+.level-1.expanded .mat-icon, .level-2.expanded .mat-icon {
   @include rotate(90deg);
 }
 
-.level-1:not(.expanded) .material-icons, .level-2:not(.expanded) .material-icons {
+.level-1:not(.expanded) .mat-icon, .level-2:not(.expanded) .mat-icon {
   @include rotate(0deg);
 }
 
@@ -161,5 +162,5 @@ aio-nav-menu.top-menu {
   aio-nav-item:last-child div {
     border-bottom: 2px solid rgba($mediumgray, 0.5);
   }
-  
+
 }

aio/src/styles/2-modules/_hamburger.scss

@@ -18,6 +18,7 @@
     color: $offwhite;
 }
 
-.hamburger md-icon {
+.hamburger .mat-icon {
   position: inherit;
-}
+  color: white;
+}