From 5e9620eeb1ed8ffe58a93855f94d691b4831097f Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Sat, 26 Feb 2022 14:41:42 +0100 Subject: [PATCH] feat(material/icon): allow multiple classes in setDefaultFontSetClass Allows for the consumer to pass in multiple classes to `MatIconRegistry.setDefaultFontSetClass`. Fixes #10471. --- src/material/icon/icon-registry.ts | 20 +++++++--------- src/material/icon/icon.spec.ts | 18 ++++++++++++++ src/material/icon/icon.ts | 24 ++++++++----------- .../icon/testing/fake-icon-registry.ts | 2 +- .../public_api_guard/material/icon-testing.md | 2 +- tools/public_api_guard/material/icon.md | 4 ++-- 6 files changed, 41 insertions(+), 29 deletions(-) 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..e65c4d7d6021 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,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); } 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)