diff --git a/src/lib/icon/icon-registry.ts b/src/lib/icon/icon-registry.ts index 2d6c2bac5f43..f04557937d13 100644 --- a/src/lib/icon/icon-registry.ts +++ b/src/lib/icon/icon-registry.ts @@ -117,11 +117,11 @@ export class MatIconRegistry { 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, @@ -238,21 +238,19 @@ export class MatIconRegistry { } /** - * 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/lib/icon/icon.spec.ts b/src/lib/icon/icon.spec.ts index 99f8d5a61bcc..d19b5d8a1270 100644 --- a/src/lib/icon/icon.spec.ts +++ b/src/lib/icon/icon.spec.ts @@ -127,6 +127,18 @@ describe('MatIcon', () => { fixture.detectChanges(); expect(sortedClassNames(matIconElement)).toEqual(['mat-icon', 'myfont']); }); + + 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/lib/icon/icon.ts b/src/lib/icon/icon.ts index 996a6f67a833..58759e6f4eda 100644 --- a/src/lib/icon/icon.ts +++ b/src/lib/icon/icon.ts @@ -107,7 +107,7 @@ export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, Can } private _fontIcon: string; - private _previousFontSetClass: string; + private _previousFontSetClass: string[] = []; private _previousFontIconClass: string; constructor( @@ -202,19 +202,13 @@ export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, Can } 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) {