fix(docs-infra): correctly display SVG icons in IE11 (#38046)

Fix two issues that affected displaying of SVG icons in IE11:

1. All SVG icons except for one appeared empty. This was related how the
CustomIconRegistry re-used the same <div> element to create all
SVG elements.

2. The GitHub and Twitter buttons next to the search bar were not sized
properly.

Fixes #37847

PR Close #38046

aio/src/app/shared/custom-icon-registry.ts

@@ -57,11 +57,13 @@ export class CustomIconRegistry extends MatIconRegistry {
   }
 
   private loadSvgElements(svgIcons: SvgIconInfo[]) {
-    const div = document.createElement('DIV');
     svgIcons.forEach(icon => {
       const ns = icon.namespace || DEFAULT_NS;
       const nsIconMap = this.preloadedSvgElements[ns] || (this.preloadedSvgElements[ns] = {});
 
+      // Creating a new `<div>` per icon is necessary for the SVGs to work correctly in IE11.
+      const div = document.createElement('DIV');
+
       // SECURITY: the source for the SVG icons is provided in code by trusted developers
       div.innerHTML = icon.svgSource;
 

aio/src/styles/1-layouts/_top-menu.scss

@@ -244,6 +244,7 @@ aio-search-box.search-container {
   .toolbar-external-icons-container {
     display: flex;
     flex-direction: row;
+    flex-shrink: 0; // This is required for the icons to be displayed correctly in IE11.
     height: 100%;
 
     a {