fix(docs-infra): prevent extra space at the bottom of the page in Chrome (#28864)

The supposedly visually hidden `mat-icon` creates unnecessary space at
the bottom of the page (below the footer) in recent Chrome versions.
This didn't happen before and it still doesn't happen in other browsers
(Firefox, Edge, IE).

This commit fixes it by wrapping the icon in a visually hidden `div`
container, which doesn't have other styles (such as `mat-icon` does)
that could affect the layout of the page.

Fixes #28858

PR Close #28864

aio/src/app/app.component.html

@@ -6,11 +6,7 @@
 
 <mat-toolbar color="primary" class="app-toolbar no-print" [class.transitioning]="isTransitioning">
   <mat-toolbar-row class="notification-container">
-    <aio-notification
-      notificationId="survey-february-2019"
-      expirationDate="2019-03-01"
-      [dismissOnContentClick]="true"
-      (dismissed)="notificationDismissed()">
+    <aio-notification notificationId="survey-february-2019" expirationDate="2019-03-01" [dismissOnContentClick]="true" (dismissed)="notificationDismissed()">
       <a href="http://bit.ly/angular-survey-2019">
         <mat-icon class="icon" svgIcon="insert_comment" aria-label="Announcement"></mat-icon>
         <span class="message">Help Angular by taking a <b>1 minute survey</b>!</span>
@@ -54,12 +50,7 @@
 
   <main class="sidenav-content" [id]="pageId" role="main">
     <aio-mode-banner [mode]="deployment.mode" [version]="versionInfo"></aio-mode-banner>
-    <aio-doc-viewer [class.no-animations]="isStarting"
-        [doc]="currentDocument"
-        (docReady)="onDocReady()"
-        (docRemoved)="onDocRemoved()"
-        (docInserted)="onDocInserted()"
-        (docRendered)="onDocRendered()">
+    <aio-doc-viewer [class.no-animations]="isStarting" [doc]="currentDocument" (docReady)="onDocReady()" (docRemoved)="onDocRemoved()" (docInserted)="onDocInserted()" (docRendered)="onDocRendered()">
     </aio-doc-viewer>
     <aio-dt *ngIf="dtOn" [(doc)]="currentDocument"></aio-dt>
   </main>
@@ -71,7 +62,7 @@
 </div>
 
 <footer class="no-print">
-  <aio-footer [nodes]="footerNodes" [versionInfo]="versionInfo" ></aio-footer>
+  <aio-footer [nodes]="footerNodes" [versionInfo]="versionInfo"></aio-footer>
 </footer>
 
 <!--
@@ -80,4 +71,6 @@
   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>
+<div class="cdk-visually-hidden" *ngIf="!isStarting">
+  <mat-icon>&nbsp;</mat-icon>
+</div>