fix(icon): not taking current path after initialization

When resolving the current path while prefixing `url()` references, we use a provider to get the current path so we can account for server-side rendering and to be able to stub it out during tests. Since the provider is an object with a regular `pathname` property, the path will only be resolved once the first time an icon is resolved and then it'll be cached. This means that all subsequent icons will take an incorrect path.

Related to #13628.

Author: crisbeto

src/lib/icon/icon.spec.ts

@@ -39,8 +39,11 @@ function verifyPathChildElement(element: Element, attributeValue: string): void
 
 
 describe('MatIcon', () => {
+  let fakePath: string;
 
   beforeEach(async(() => {
+    fakePath = '/fake-path';
+
     TestBed.configureTestingModule({
       imports: [HttpClientTestingModule, MatIconModule],
       declarations: [
@@ -55,7 +58,7 @@ describe('MatIcon', () => {
       ],
       providers: [{
         provide: MAT_ICON_LOCATION,
-        useValue: {pathname: '/fake-path'}
+        useValue: {getPathname: () => fakePath}
       }]
     });
 
@@ -608,6 +611,36 @@ describe('MatIcon', () => {
       tick();
     }));
 
+    it('should use latest path when prefixing the `url()` references', fakeAsync(() => {
+      iconRegistry.addSvgIconLiteral('fido', trustHtml(`
+        <svg>
+          <filter id="blur">
+            <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
+          </filter>
+
+          <circle cx="170" cy="60" r="50" fill="green" filter="url('#blur')" />
+        </svg>
+      `));
+
+      let fixture = TestBed.createComponent(IconFromSvgName);
+      fixture.componentInstance.iconName = 'fido';
+      fixture.detectChanges();
+      let circle = fixture.nativeElement.querySelector('mat-icon svg circle');
+
+      expect(circle.getAttribute('filter')).toMatch(/^url\(['"]?\/fake-path#blur['"]?\)$/);
+      tick();
+      fixture.destroy();
+
+      fakePath = '/another-fake-path';
+      fixture = TestBed.createComponent(IconFromSvgName);
+      fixture.componentInstance.iconName = 'fido';
+      fixture.detectChanges();
+      circle = fixture.nativeElement.querySelector('mat-icon svg circle');
+
+      expect(circle.getAttribute('filter')).toMatch(/^url\(['"]?\/another-fake-path#blur['"]?\)$/);
+      tick();
+    }));
+
   });
 
   describe('custom fonts', () => {

src/lib/icon/icon.ts

@@ -51,14 +51,18 @@ export const MAT_ICON_LOCATION = new InjectionToken<MatIconLocation>('mat-icon-l
  * @docs-private
  */
 export interface MatIconLocation {
-  pathname: string;
+  getPathname: () => string;
 }
 
 /** @docs-private */
 export function MAT_ICON_LOCATION_FACTORY(): MatIconLocation {
   const _document = inject(DOCUMENT);
-  const pathname = (_document && _document.location && _document.location.pathname) || '';
-  return {pathname};
+
+  return {
+    // Note that this needs to be a function, rather than a property, because Angular
+    // will only resolve it once, but we want the current path on each call.
+    getPathname: () => (_document && _document.location && _document.location.pathname) || ''
+  };
 }
 
 
@@ -324,7 +328,7 @@ export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, Can
     }
 
     const elementsWithFuncIri = element.querySelectorAll(funcIriAttributeSelector);
-    const path = this._location.pathname ? this._location.pathname.split('#')[0] : '';
+    const path = this._location.getPathname().split('#')[0];
 
     for (let i = 0; i < elementsWithFuncIri.length; i++) {
       funcIriAttributes.forEach(attr => {