fix(icon): handle references for pages with base tag

Prepends the current path to any SVG elements with attributes pointing to something by id. If the reference isn't prefixed, it won't work on Safari if the page has a `base` tag (which is used by most Angular apps that are using the router).

Fixes #9276.

Author: crisbeto

src/lib/icon/icon.spec.ts

@@ -2,7 +2,8 @@ import {inject, async, fakeAsync, tick, TestBed} from '@angular/core/testing';
 import {SafeResourceUrl, DomSanitizer, SafeHtml} from '@angular/platform-browser';
 import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
 import {Component} from '@angular/core';
-import {MatIconModule} from './index';
+import {Location} from '@angular/common';
+import {MatIconModule, MAT_ICON_LOCATION} from './index';
 import {MatIconRegistry, getMatIconNoHttpProviderError} from './icon-registry';
 import {FAKE_SVGS} from './fake-svgs';
 import {wrappedErrorMessage} from '@angular/cdk/testing';
@@ -52,7 +53,11 @@ describe('MatIcon', () => {
         IconWithBindingAndNgIf,
         InlineIcon,
         SvgIconWithUserContent,
-      ]
+      ],
+      providers: [{
+        provide: MAT_ICON_LOCATION,
+        useValue: {pathname: '/fake-path'}
+      }]
     });
 
     TestBed.compileComponents();
@@ -580,6 +585,30 @@ describe('MatIcon', () => {
 
       tick();
     }));
+
+    it('should prepend the current path to attributes with `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>
+      `));
+
+      const fixture = TestBed.createComponent(IconFromSvgName);
+      fixture.componentInstance.iconName = 'fido';
+      fixture.detectChanges();
+      const circle = fixture.nativeElement.querySelector('mat-icon svg circle');
+
+      // We use a regex to match here, rather than the exact value, because different browsers
+      // return different quotes through `getAttribute`, while some even omit the quotes altogether.
+      expect(circle.getAttribute('filter')).toMatch(/^url\(['"]?\/fake-path#blur['"]?\)$/);
+
+      tick();
+    }));
+
   });
 
   describe('custom fonts', () => {

src/lib/icon/icon.ts

@@ -17,7 +17,12 @@ import {
   OnInit,
   SimpleChanges,
   ViewEncapsulation,
+  Optional,
+  InjectionToken,
+  inject,
+  Inject,
 } from '@angular/core';
+import {DOCUMENT} from '@angular/common';
 import {CanColor, CanColorCtor, mixinColor} from '@angular/material/core';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {MatIconRegistry} from './icon-registry';
@@ -31,6 +36,53 @@ export class MatIconBase {
 export const _MatIconMixinBase: CanColorCtor & typeof MatIconBase =
     mixinColor(MatIconBase);
 
+/**
+ * Injection token used to provide the current location to `MatIcon`.
+ * Used to handle server-side rendering and to stub out during unit tests.
+ * @docs-private
+ */
+export const MAT_ICON_LOCATION = new InjectionToken<MatIconLocation>('mat-icon-location', {
+  providedIn: 'root',
+  factory: MAT_ICON_LOCATION_FACTORY
+});
+
+/**
+ * Stubbed out location for `MatIcon`.
+ * @docs-private
+ */
+export interface MatIconLocation {
+  pathname: string;
+}
+
+/** @docs-private */
+export function MAT_ICON_LOCATION_FACTORY(): MatIconLocation {
+  const _document = inject(DOCUMENT);
+  const pathname = (_document && _document.location && _document.location.pathname) || '';
+  return {pathname};
+}
+
+
+/** SVG attributes that accept a FuncIRI (e.g. `url(<something>)`). */
+const funcIriAttributes = [
+  'clip-path',
+  'color-profile',
+  'src',
+  'cursor',
+  'fill',
+  'filter',
+  'marker',
+  'marker-start',
+  'marker-mid',
+  'marker-end',
+  'mask',
+  'stroke'
+];
+
+/** Selector that can be used to find all elements that are using a `FuncIRI`. */
+const funcIriAttributeSelector = funcIriAttributes.map(attr => `[${attr}]`).join(', ');
+
+/** Regex that can be used to extract the id out of a FuncIRI. */
+const funcIriPattern = /^url\(['"]?#(.*?)['"]?\)$/;
 
 /**
  * Component to display an icon. It can be used in the following ways:
@@ -113,7 +165,12 @@ export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, Can
   constructor(
       elementRef: ElementRef<HTMLElement>,
       private _iconRegistry: MatIconRegistry,
-      @Attribute('aria-hidden') ariaHidden: string) {
+      @Attribute('aria-hidden') ariaHidden: string,
+      /**
+       * @deprecated `location` parameter to be made required.
+       * @breaking-change 8.0.0
+       */
+      @Optional() @Inject(MAT_ICON_LOCATION) private _location?: MatIconLocation) {
     super(elementRef);
 
     // If the user has not explicitly set aria-hidden, mark the icon as hidden, as this is
@@ -192,6 +249,9 @@ export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, Can
       styleTags[i].textContent += ' ';
     }
 
+    // Note: we do this fix here, rather than the icon registry, because the
+    // references have to point to the URL at the time that the icon was created.
+    this._prependCurrentPathToReferences(svg);
     this._elementRef.nativeElement.appendChild(svg);
   }
 
@@ -251,4 +311,32 @@ export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, Can
   private _cleanupFontValue(value: string) {
     return typeof value === 'string' ? value.trim().split(' ')[0] : value;
   }
+
+  /**
+   * Prepends the current path to all elements that have an attribute pointing to a `FuncIRI`
+   * reference. This is required because WebKit browsers require references to be prefixed with
+   * the current path, if the page has a `base` tag.
+   */
+  private _prependCurrentPathToReferences(element: SVGElement) {
+    // @breaking-change 8.0.0 Remove this null check once `_location` parameter is required.
+    if (!this._location) {
+      return;
+    }
+
+    const elementsWithFuncIri = element.querySelectorAll(funcIriAttributeSelector);
+    const path = this._location.pathname ? this._location.pathname.split('#')[0] : '';
+
+    for (let i = 0; i < elementsWithFuncIri.length; i++) {
+      funcIriAttributes.forEach(attr => {
+        const value = elementsWithFuncIri[i].getAttribute(attr);
+        const match = value ? value.match(funcIriPattern) : null;
+
+        if (match) {
+          // Note the quotes inside the `url()`. They're important, because URLs pointing to named
+          // router outlets can contain parentheses which will break if they aren't quoted.
+          elementsWithFuncIri[i].setAttribute(attr, `url('${path}#${match[1]}')`);
+        }
+      });
+    }
+  }
 }