diff --git a/src/material/icon/icon-registry.ts b/src/material/icon/icon-registry.ts index 6bc9fee988f4..f4f9939701ba 100644 --- a/src/material/icon/icon-registry.ts +++ b/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 `` 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, @@ -302,21 +302,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 2b03d343f3d7..7470ee040101 100644 --- a/src/material/icon/icon.spec.ts +++ b/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', () => { diff --git a/src/material/icon/icon.ts b/src/material/icon/icon.ts index af99f5f379b8..171cf837e3bd 100644 --- a/src/material/icon/icon.ts +++ b/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,19 @@ export class MatIcon extends _MatIconBase implements OnInit, AfterViewChecked, C } 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); + this._previousFontSetClass.forEach(className => elem.classList.remove(className)); + fontSetClasses.forEach(className => { + if (className) { + elem.classList.add(className); } - if (fontSetClass) { - elem.classList.add(fontSetClass); - } - this._previousFontSetClass = fontSetClass; - } + }); + this._previousFontSetClass = fontSetClasses; - if (this.fontIcon != this._previousFontIconClass) { + if (this.fontIcon !== this._previousFontIconClass) { if (this._previousFontIconClass) { elem.classList.remove(this._previousFontIconClass); } diff --git a/src/material/icon/testing/fake-icon-registry.ts b/src/material/icon/testing/fake-icon-registry.ts index 1204c52febb1..57f69d4aaf64 100644 --- a/src/material/icon/testing/fake-icon-registry.ts +++ b/src/material/icon/testing/fake-icon-registry.ts @@ -61,7 +61,7 @@ export class FakeMatIconRegistry implements PublicApi, OnDestro } getDefaultFontSetClass() { - return 'material-icons'; + return ['material-icons']; } getSvgIconFromUrl(): Observable { diff --git a/tools/public_api_guard/material/icon-testing.md b/tools/public_api_guard/material/icon-testing.md index c240c8c20b79..919ce2e72d5f 100644 --- a/tools/public_api_guard/material/icon-testing.md +++ b/tools/public_api_guard/material/icon-testing.md @@ -35,7 +35,7 @@ export class FakeMatIconRegistry implements PublicApi, OnDestro // (undocumented) classNameForFontAlias(alias: string): string; // (undocumented) - getDefaultFontSetClass(): string; + getDefaultFontSetClass(): string[]; // (undocumented) getNamedSvgIcon(): Observable; // (undocumented) diff --git a/tools/public_api_guard/material/icon.md b/tools/public_api_guard/material/icon.md index b25bfd90a7bf..2387653cabe6 100644 --- a/tools/public_api_guard/material/icon.md +++ b/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; getSvgIconFromUrl(safeUrl: SafeResourceUrl): Observable; // (undocumented) ngOnDestroy(): void; registerFontClassAlias(alias: string, className?: string): this; - setDefaultFontSetClass(className: string): this; + setDefaultFontSetClass(...classNames: string[]): this; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration; // (undocumented)