fix(icon): IE/Edge ignoring style tags inside inline SVG

Adds a workaround for an issue in IE11 and Edge where `style` tags inside dynamically-created SVGs will be ignored.

Fixes #11458.

Author: crisbeto

src/lib/icon/icon.spec.ts

@@ -539,6 +539,26 @@ describe('MatIcon', () => {
       verifyPathChildElement(svgElement, 'left');
       expect(svgElement.getAttribute('viewBox')).toBeFalsy();
     });
+
+    it('should add an extra string to the end of `style` tags inside SVG', fakeAsync(() => {
+      iconRegistry.addSvgIconLiteral('fido', trustHtml(`
+        <svg>
+          <style>#woof {color: blue;}</style>
+          <path id="woof" name="woof"></path>
+        </svg>
+      `));
+
+      const fixture = TestBed.createComponent(IconFromSvgName);
+      fixture.componentInstance.iconName = 'fido';
+      fixture.detectChanges();
+      const styleTag = fixture.nativeElement.querySelector('mat-icon svg style');
+
+      // Note the extra whitespace at the end which is what we're testing for. This is a
+      // workaround for IE and Edge ignoring `style` tags in dynamically-created SVGs.
+      expect(styleTag.textContent).toBe('#woof {color: blue;} ');
+
+      tick();
+    }));
   });
 
   describe('custom fonts', () => {

src/lib/icon/icon.ts

@@ -182,6 +182,16 @@ export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, Can
 
   private _setSvgElement(svg: SVGElement) {
     this._clearSvgElement();
+
+    // Workaround for IE11 and Edge ignoring `style` tags inside dynamically-created SVGs.
+    // See: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/10898469/
+    // Do this before inserting the element into the DOM, in order to avoid a style recalculation.
+    const styleTags = svg.querySelectorAll('style') as NodeListOf<HTMLStyleElement>;
+
+    for (let i = 0; i < styleTags.length; i++) {
+      styleTags[i].textContent += ' ';
+    }
+
     this._elementRef.nativeElement.appendChild(svg);
   }