feat(material/icon): allow fetching icons with credentials (#18896)

Adds the ability to fetch SVG icons using withCredentials.

Fixes #18871

Author: jchv

src/material/icon/icon-registry.ts

@@ -69,6 +69,9 @@ export function getMatIconFailedToSanitizeLiteralError(literal: SafeHtml): Error
 export interface IconOptions {
   /** View box to set on the icon. */
   viewBox?: string;
+
+  /** Whether or not to fetch the icon or icon set using HTTP credentials. */
+  withCredentials?: boolean;
 }
 
 /**
@@ -426,7 +429,7 @@ export class MatIconRegistry implements OnDestroy {
    * from it.
    */
   private _loadSvgIconFromConfig(config: SvgIconConfig): Observable<SVGElement> {
-    return this._fetchUrl(config.url)
+    return this._fetchIcon(config)
         .pipe(map(svgText => this._createSvgElementForSingleIcon(svgText, config.options)));
   }
 
@@ -440,7 +443,7 @@ export class MatIconRegistry implements OnDestroy {
       return observableOf(config.svgElement);
     }
 
-    return this._fetchUrl(config.url).pipe(map(svgText => {
+    return this._fetchIcon(config).pipe(map(svgText => {
       // It is possible that the icon set was parsed and cached by an earlier request, so parsing
       // only needs to occur if the cache is yet unset.
       if (!config.svgElement) {
@@ -563,10 +566,13 @@ export class MatIconRegistry implements OnDestroy {
   }
 
   /**
-   * Returns an Observable which produces the string contents of the given URL. Results may be
+   * Returns an Observable which produces the string contents of the given icon. Results may be
    * cached, so future calls with the same URL may not cause another HTTP request.
    */
-  private _fetchUrl(safeUrl: SafeResourceUrl | null): Observable<string> {
+  private _fetchIcon(iconConfig: SvgIconConfig): Observable<string> {
+    const {url: safeUrl, options} = iconConfig;
+    const withCredentials = options?.withCredentials ?? false;
+
     if (!this._httpClient) {
       throw getMatIconNoHttpProviderError();
     }
@@ -592,7 +598,7 @@ export class MatIconRegistry implements OnDestroy {
 
     // TODO(jelbourn): for some reason, the `finalize` operator "loses" the generic type on the
     // Observable. Figure out why and fix it.
-    const req = this._httpClient.get(url, {responseType: 'text'}).pipe(
+    const req = this._httpClient.get(url, {responseType: 'text', withCredentials}).pipe(
       finalize(() => this._inProgressUrlFetches.delete(url)),
       share(),
     );

src/material/icon/icon.spec.ts

@@ -1,6 +1,10 @@
 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 {
+  HttpClientTestingModule,
+  HttpTestingController,
+  TestRequest,
+} from '@angular/common/http/testing';
 import {Component, ErrorHandler} from '@angular/core';
 import {MatIconModule, MAT_ICON_LOCATION} from './index';
 import {MatIconRegistry, getMatIconNoHttpProviderError} from './icon-registry';
@@ -189,9 +193,11 @@ describe('MatIcon', () => {
     it('should register icon URLs by name', fakeAsync(() => {
       iconRegistry.addSvgIcon('fluffy', trustUrl('cat.svg'));
       iconRegistry.addSvgIcon('fido', trustUrl('dog.svg'));
+      iconRegistry.addSvgIcon('felix', trustUrl('auth-cat.svg'), {withCredentials: true});
 
       const fixture = TestBed.createComponent(IconFromSvgName);
       let svgElement: SVGElement;
+      let testRequest: TestRequest;
       const testComponent = fixture.componentInstance;
       const iconElement = fixture.debugElement.nativeElement.querySelector('mat-icon');
 
@@ -215,6 +221,15 @@ describe('MatIcon', () => {
       svgElement = verifyAndGetSingleSvgChild(iconElement);
       verifyPathChildElement(svgElement, 'woof');
 
+      // Change icon to one that needs credentials during fetch.
+      testComponent.iconName = 'felix';
+      fixture.detectChanges();
+      testRequest = http.expectOne('auth-cat.svg');
+      expect(testRequest.request.withCredentials).toBeTrue();
+      testRequest.flush(FAKE_SVGS.cat);
+      svgElement = verifyAndGetSingleSvgChild(iconElement);
+      verifyPathChildElement(svgElement, 'meow');
+
       // Assert that a registered icon can be looked-up by url.
       iconRegistry.getSvgIconFromUrl(trustUrl('cat.svg')).subscribe(element => {
         verifyPathChildElement(element, 'meow');

tools/public_api_guard/material/icon.d.ts

@@ -16,6 +16,7 @@ export declare function ICON_REGISTRY_PROVIDER_FACTORY(parentRegistry: MatIconRe
 
 export interface IconOptions {
     viewBox?: string;
+    withCredentials?: boolean;
 }
 
 export declare const MAT_ICON_LOCATION: InjectionToken<MatIconLocation>;