feat(icon): allow multiple classes in setDefaultFontSetClass

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

Fixes #10471.

Author: crisbeto

src/lib/icon/icon-registry.ts

@@ -118,11 +118,11 @@ export class MatIconRegistry implements OnDestroy {
   private _fontCssClassesByAlias = new Map<string, string>();
 
   /**
-   * 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,
@@ -239,21 +239,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/lib/icon/icon.spec.ts

@@ -175,6 +175,17 @@ 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', 'myfont', 'myfont-48x48']);
+    });
   });
 
   describe('Icons from URLs', () => {

src/lib/icon/icon.ts

@@ -169,7 +169,7 @@ export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, Aft
   }
   private _fontIcon: string;
 
-  private _previousFontSetClass: string;
+  private _previousFontSetClass: string[] = [];
   private _previousFontIconClass: string;
 
   /** Keeps track of the current page path. */
@@ -331,19 +331,13 @@ export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, Aft
     }
 
     const elem: HTMLElement = this._elementRef.nativeElement;
-    const fontSetClass = this.fontSet ?
-        this._iconRegistry.classNameForFontAlias(this.fontSet) :
+    const fontSetClasses = this.fontSet ?
+        [this._iconRegistry.classNameForFontAlias(this.fontSet)] :
         this._iconRegistry.getDefaultFontSetClass();
 
-    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._previousFontIconClass) {