diff --git a/src/material/icon/icon-registry.ts b/src/material/icon/icon-registry.ts index d85747bf59a2..a1b061f0e7c6 100644 --- a/src/material/icon/icon-registry.ts +++ b/src/material/icon/icon-registry.ts @@ -118,11 +118,11 @@ export class MatIconRegistry implements OnDestroy { private _fontCssClassesByAlias = new Map(); /** - * The CSS class to apply when an `` 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 `` 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 `` component does not + * Sets the CSS classes to be used for icon fonts when an `` 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 `` component does not + * Returns the CSS classes to be used for icon fonts when an `` 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; } diff --git a/src/material/icon/icon.spec.ts b/src/material/icon/icon.spec.ts index a14eace6a48c..341367e955d6 100644 --- a/src/material/icon/icon.spec.ts +++ b/src/material/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', () => { diff --git a/src/material/icon/icon.ts b/src/material/icon/icon.ts index f996381107f4..13406ef2791b 100644 --- a/src/material/icon/icon.ts +++ b/src/material/icon/icon.ts @@ -168,7 +168,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. */ @@ -330,19 +330,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) {