From 0a389a01521949a805320ac41457bb4e9acb294e Mon Sep 17 00:00:00 2001
From: Mika Kalathil <mika@kalathil.me>
Date: Wed, 27 Jun 2018 14:01:18 -0700
Subject: [PATCH 1/3] fix(icon): make svg filters work in Safari/Firefox

SVG filters do not work in Safari/FF because of paths in url needing to be updated to current path
This fixes #9276
---
 src/lib/icon/icon.ts | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/lib/icon/icon.ts b/src/lib/icon/icon.ts
index d07002ed220d..e7a411c47272 100644
--- a/src/lib/icon/icon.ts
+++ b/src/lib/icon/icon.ts
@@ -187,10 +187,12 @@ export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, Can
     // 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._updateUrlPaths(svg.outerHTML);
 
     this._elementRef.nativeElement.appendChild(svg);
   }
@@ -236,7 +238,17 @@ export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, Can
       this._previousFontIconClass = this.fontIcon;
     }
   }
-
+ 
+  /**
+   * Updates the url paths with current paths append to icon which fixes
+   * SVG filters in Safari/Firefox
+   */
+  private _updateUrlPaths(svg: SVGElement) {
+    svg.outerHTML = svg.outerHTML.replace(/url\((.*)\)/, `url(${window.location.href}$1)`);
+    
+    return svg
+  }
+  
   /**
    * Cleans up a value to be used as a fontIcon or fontSet.
    * Since the value ends up being assigned as a CSS class, we

From f39ead7e1e5b18bdc4a69df746f363c8bdb05b16 Mon Sep 17 00:00:00 2001
From: Mika Kalathil <mika@kalathil.me>
Date: Wed, 27 Jun 2018 14:06:48 -0700
Subject: [PATCH 2/3] use location service instead of window.location

---
 src/lib/icon/icon.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/lib/icon/icon.ts b/src/lib/icon/icon.ts
index e7a411c47272..5a42a3f2a280 100644
--- a/src/lib/icon/icon.ts
+++ b/src/lib/icon/icon.ts
@@ -18,6 +18,7 @@ import {
   SimpleChanges,
   ViewEncapsulation,
 } from '@angular/core';
+import {Location} from '@angular/common'
 import {CanColor, mixinColor} from '@angular/material/core';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {MatIconRegistry} from './icon-registry';
@@ -112,6 +113,7 @@ export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, Can
 
   constructor(
       elementRef: ElementRef,
+      private _location: Location,
       private _iconRegistry: MatIconRegistry,
       @Attribute('aria-hidden') ariaHidden: string) {
     super(elementRef);
@@ -244,7 +246,9 @@ export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, Can
    * SVG filters in Safari/Firefox
    */
   private _updateUrlPaths(svg: SVGElement) {
-    svg.outerHTML = svg.outerHTML.replace(/url\((.*)\)/, `url(${window.location.href}$1)`);
+    const currentPath = location.prepareExternalUrl(location.path());
+    
+    svg.outerHTML = svg.outerHTML.replace(/url\((.*)\)/, `url(${currentPath}$1)`);
     
     return svg
   }

From a8e45ff81e936e25baaf21e76f4fa59c7cd43b3b Mon Sep 17 00:00:00 2001
From: Mika Kalathil <mika@kalathil.me>
Date: Wed, 27 Jun 2018 14:34:50 -0700
Subject: [PATCH 3/3] fix reference to location

---
 src/lib/icon/icon.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/icon/icon.ts b/src/lib/icon/icon.ts
index 5a42a3f2a280..511a1b860bc3 100644
--- a/src/lib/icon/icon.ts
+++ b/src/lib/icon/icon.ts
@@ -246,7 +246,7 @@ export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, Can
    * SVG filters in Safari/Firefox
    */
   private _updateUrlPaths(svg: SVGElement) {
-    const currentPath = location.prepareExternalUrl(location.path());
+    const currentPath = this._location.prepareExternalUrl(this._location.path());
     
     svg.outerHTML = svg.outerHTML.replace(/url\((.*)\)/, `url(${currentPath}$1)`);