From b3b03c35b501c5b6691c1695b5c60731f831e1b3 Mon Sep 17 00:00:00 2001 From: Saif Date: Tue, 14 Jul 2020 17:13:50 +0300 Subject: [PATCH] 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
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 | 4 +++- aio/src/styles/1-layouts/_top-menu.scss | 1 + 2 files changed, 4 insertions(+), 1 deletion(-) 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 `
` 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 {