From 85fa021fecbf9f0cebc4e4fe9e65662086a47e46 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Wed, 30 May 2018 10:58:41 +0300
Subject: [PATCH] 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.
---
 src/lib/icon/icon.spec.ts | 20 ++++++++++++++++++++
 src/lib/icon/icon.ts      | 10 ++++++++++
 2 files changed, 30 insertions(+)

diff --git a/src/lib/icon/icon.spec.ts b/src/lib/icon/icon.spec.ts
index 99f8d5a61bcc..b12c4ea68ed8 100644
--- a/src/lib/icon/icon.spec.ts
+++ b/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', () => {
diff --git a/src/lib/icon/icon.ts b/src/lib/icon/icon.ts
index 996a6f67a833..d07002ed220d 100644
--- a/src/lib/icon/icon.ts
+++ b/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);
   }