honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
Saif 2020-07-14 17:13:50 +03:00 committed by Andrew Kushnir
parent fd45f7485d
commit b3b03c35b5
2 changed files with 4 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
aio/src/app/shared/custom-icon-registry.ts
View File

@ -57,11 +57,13 @@ export class CustomIconRegistry extends MatIconRegistry {
} }
private loadSvgElements(svgIcons: SvgIconInfo[]) { private loadSvgElements(svgIcons: SvgIconInfo[]) {
const div = document.createElement('DIV');
svgIcons.forEach(icon => { svgIcons.forEach(icon => {
const ns = icon.namespace || DEFAULT_NS; const ns = icon.namespace || DEFAULT_NS;
const nsIconMap = this.preloadedSvgElements[ns] || (this.preloadedSvgElements[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 // SECURITY: the source for the SVG icons is provided in code by trusted developers
div.innerHTML = icon.svgSource; div.innerHTML = icon.svgSource;

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

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