diff --git a/aio/src/app/shared/custom-icon-registry.ts b/aio/src/app/shared/custom-icon-registry.ts
index efa0a3605f..af5a06b2ae 100644
--- a/aio/src/app/shared/custom-icon-registry.ts
+++ b/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;
 
diff --git a/aio/src/styles/1-layouts/_top-menu.scss b/aio/src/styles/1-layouts/_top-menu.scss
index 5166b295ef..b6ad206fd5 100644
--- a/aio/src/styles/1-layouts/_top-menu.scss
+++ b/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 {