feat(material/icon): allow multiple classes in setDefaultFontSetClass (#10484)

Allows for the consumer to pass in multiple classes to `MatIconRegistry.setDefaultFontSetClass`.

Fixes #10471.

Author: crisbeto

src/material/icon/icon-registry.ts

@@ -145,11 +145,11 @@ export class MatIconRegistry implements OnDestroy {
   private _resolvers: IconResolver[] = [];
 
   /**
-   * The CSS class to apply when an `<mat-icon>` component has no icon name, url, or font specified.
-   * The default 'material-icons' value assumes that the material icon font has been loaded as
-   * described at http://google.github.io/material-design-icons/#icon-font-for-the-web
+   * The CSS classes to apply when an `<mat-icon>` component has no icon name, url, or font
+   * specified. The default 'material-icons' value assumes that the material icon font has been
+   * loaded as described at http://google.github.io/material-design-icons/#icon-font-for-the-web
    */
-  private _defaultFontSetClass = 'material-icons';
+  private _defaultFontSetClass = ['material-icons'];
 
   constructor(
     @Optional() private _httpClient: HttpClient,
@@ -302,21 +302,19 @@ export class MatIconRegistry implements OnDestroy {
   }
 
   /**
-   * Sets the CSS class name to be used for icon fonts when an `<mat-icon>` component does not
+   * Sets the CSS classes to be used for icon fonts when an `<mat-icon>` component does not
    * have a fontSet input value, and is not loading an icon by name or URL.
-   *
-   * @param className
    */
-  setDefaultFontSetClass(className: string): this {
-    this._defaultFontSetClass = className;
+  setDefaultFontSetClass(...classNames: string[]): this {
+    this._defaultFontSetClass = classNames;
     return this;
   }
 
   /**
-   * Returns the CSS class name to be used for icon fonts when an `<mat-icon>` component does not
+   * Returns the CSS classes to be used for icon fonts when an `<mat-icon>` component does not
    * have a fontSet input value, and is not loading an icon by name or URL.
    */
-  getDefaultFontSetClass(): string {
+  getDefaultFontSetClass(): string[] {
     return this._defaultFontSetClass;
   }
 

src/material/icon/icon.spec.ts

@@ -223,6 +223,24 @@ describe('MatIcon', () => {
 
       expect(matIconElement.textContent.trim()).toBe('house');
     });
+
+    it('should be able to provide multiple alternate icon set classes', () => {
+      iconRegistry.setDefaultFontSetClass('myfont', 'myfont-48x48');
+
+      let fixture = TestBed.createComponent(IconWithLigature);
+
+      const testComponent = fixture.componentInstance;
+      const matIconElement = fixture.debugElement.nativeElement.querySelector('mat-icon');
+      testComponent.iconName = 'home';
+      fixture.detectChanges();
+      expect(sortedClassNames(matIconElement)).toEqual([
+        'mat-icon',
+        'mat-icon-no-color',
+        'myfont',
+        'myfont-48x48',
+        'notranslate',
+      ]);
+    });
   });
 
   describe('Icons from URLs', () => {

src/material/icon/icon.ts

@@ -209,7 +209,7 @@ export class MatIcon extends _MatIconBase implements OnInit, AfterViewChecked, C
   }
   private _fontIcon: string;
 
-  private _previousFontSetClass: string;
+  private _previousFontSetClass: string[] = [];
   private _previousFontIconClass: string;
 
   _svgName: string | null;
@@ -366,21 +366,17 @@ export class MatIcon extends _MatIconBase implements OnInit, AfterViewChecked, C
     }
 
     const elem: HTMLElement = this._elementRef.nativeElement;
-    const fontSetClass = this.fontSet
-      ? this._iconRegistry.classNameForFontAlias(this.fontSet)
-      : this._iconRegistry.getDefaultFontSetClass();
+    const fontSetClasses = (
+      this.fontSet
+        ? [this._iconRegistry.classNameForFontAlias(this.fontSet)]
+        : this._iconRegistry.getDefaultFontSetClass()
+    ).filter(className => className.length > 0);
 
-    if (fontSetClass != this._previousFontSetClass) {
-      if (this._previousFontSetClass) {
-        elem.classList.remove(this._previousFontSetClass);
-      }
-      if (fontSetClass) {
-        elem.classList.add(fontSetClass);
-      }
-      this._previousFontSetClass = fontSetClass;
-    }
+    this._previousFontSetClass.forEach(className => elem.classList.remove(className));
+    fontSetClasses.forEach(className => elem.classList.add(className));
+    this._previousFontSetClass = fontSetClasses;
 
-    if (this.fontIcon != this._previousFontIconClass) {
+    if (this.fontIcon !== this._previousFontIconClass) {
       if (this._previousFontIconClass) {
         elem.classList.remove(this._previousFontIconClass);
       }

src/material/icon/testing/fake-icon-registry.ts

@@ -61,7 +61,7 @@ export class FakeMatIconRegistry implements PublicApi<MatIconRegistry>, OnDestro
   }
 
   getDefaultFontSetClass() {
-    return 'material-icons';
+    return ['material-icons'];
   }
 
   getSvgIconFromUrl(): Observable<SVGElement> {

tools/public_api_guard/material/icon-testing.md

@@ -35,7 +35,7 @@ export class FakeMatIconRegistry implements PublicApi<MatIconRegistry>, OnDestro
     // (undocumented)
     classNameForFontAlias(alias: string): string;
     // (undocumented)
-    getDefaultFontSetClass(): string;
+    getDefaultFontSetClass(): string[];
     // (undocumented)
     getNamedSvgIcon(): Observable<SVGElement>;
     // (undocumented)

tools/public_api_guard/material/icon.md

@@ -128,13 +128,13 @@ export class MatIconRegistry implements OnDestroy {
     addSvgIconSetLiteral(literal: SafeHtml, options?: IconOptions): this;
     addSvgIconSetLiteralInNamespace(namespace: string, literal: SafeHtml, options?: IconOptions): this;
     classNameForFontAlias(alias: string): string;
-    getDefaultFontSetClass(): string;
+    getDefaultFontSetClass(): string[];
     getNamedSvgIcon(name: string, namespace?: string): Observable<SVGElement>;
     getSvgIconFromUrl(safeUrl: SafeResourceUrl): Observable<SVGElement>;
     // (undocumented)
     ngOnDestroy(): void;
     registerFontClassAlias(alias: string, className?: string): this;
-    setDefaultFontSetClass(className: string): this;
+    setDefaultFontSetClass(...classNames: string[]): this;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatIconRegistry, [{ optional: true; }, null, { optional: true; }, null]>;
     // (undocumented)