17121302453

Committed 21 Aug 2025 08:20AM UTC coverage: 91.578% (+0.06%) from 91.52%

Build # 17121302453

Build Type

push

github

Committed by

web-flow

Commit Message

chore(schematics): use node version that works for ts-node (#16147)

Run Details

13577 of 15915 branches covered (85.31%)

27403 of 29923 relevant lines covered (91.58%)

34514.28 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

97.44

/projects/igniteui-angular/src/lib/icon/icon.component.ts

import {
    Component,
    ElementRef,
    HostBinding,
    Input,
    OnInit,
    OnDestroy,
    OnChanges,
    ChangeDetectorRef,
    booleanAttribute,
} from "@angular/core";
import { IgxIconService } from "./icon.service";
import type { IconReference } from "./types";
import { filter, takeUntil } from "rxjs/operators";
import { Subject } from "rxjs";
import { SafeHtml } from "@angular/platform-browser";

/**
 * Icon provides a way to include material icons to markup
 *
 * @igxModule IgxIconModule
 *
 * @igxTheme igx-icon-theme
 *
 * @igxKeywords icon, picture
 *
 * @igxGroup Display
 *
 * @remarks
 *
 * The Ignite UI Icon makes it easy for developers to include material design icons directly in their markup. The icons
 * support different icon families and can be marked as active or disabled using the `active` property. This will change the appearance
 * of the icon.
 *
 * @example
 * ```html
 * <igx-icon family="filter-icons" active="true">home</igx-icon>
 * ```
 */
@Component({
    selector: "igx-icon",
    templateUrl: "icon.component.html",
})
export class IgxIconComponent implements OnInit, OnChanges, OnDestroy {
    private _iconRef: IconReference;
    private _destroy$ = new Subject<void>();
    private _userClasses = new Set<string>();
    private _iconClasses = new Set<string>();

    @HostBinding("class")
    protected get elementClasses() {
        const icon = Array.from(this._iconClasses).join(" ");
        const user = Array.from(this._userClasses).join(" ");

        return `igx-icon ${icon} ${user}`.trim();
    }

    private addIconClass(className: string) {
        this._iconClasses.add(className);
    }

    private clearIconClasses() {
        this._iconClasses.clear();
    }

    /**
     *  An accessor that returns inactive property.
     *
     * @example
     * ```typescript
     * @ViewChild("MyIcon")
     * public icon: IgxIconComponent;
     * ngAfterViewInit() {
     *    let iconActive = this.icon.getInactive;
     * }
     * ```
     */
    @HostBinding("class.igx-icon--inactive")
    public get getInactive(): boolean {
        return !this.active;
    }

    /**
     *  The `aria-hidden` attribute of the icon.
     *  By default is set to 'true'.
     */
    @HostBinding("attr.aria-hidden")
    @Input()
    public ariaHidden = true;

    /**
     * An @Input property that sets the value of the `family`. By default it's "material".
     *
     * @example
     * ```html
     * <igx-icon family="material">settings</igx-icon>
     * ```
     */
    @Input()
    public family: string;

    /**
     *  Set the `name` of the icon.
     *
     *  @example
     * ```html
     * <igx-icon name="contains" family="filter-icons"></igx-icon>
     * ```
     */
    @Input()
    public name: string;

    /**
     * An @Input property that allows you to disable the `active` property. By default it's applied.
     *
     * @example
     * ```html
     * <igx-icon [active]="false">settings</igx-icon>
     * ```
     */
    @Input({ transform: booleanAttribute })
    public active = true;

    constructor(
        public el: ElementRef,
        private iconService: IgxIconService,
        private ref: ChangeDetectorRef,
    ) {
        this.family = this.iconService.defaultFamily.name;

        this.iconService.iconLoaded
            .pipe(
                filter((e) => e.name === this.name && e.family === this.family),
                takeUntil(this._destroy$),
            )
            .subscribe(() => {
                this.setIcon();
                this.ref.detectChanges()
            });
    }

    /**
     * @hidden
     * @internal
     */
    public ngOnInit() {
        this.setIcon();
    }

    /**
     * @hidden
     * @internal
     */
    public ngOnChanges() {
        this.setIcon();
    }

    /**
     * @hidden
     * @internal
     */
    public ngOnDestroy() {
        this._destroy$.next();
        this._destroy$.complete();
    }

    protected get iconRef() {
        return this._iconRef;
    }

    protected set iconRef(ref: IconReference) {
        this._iconRef = ref;
    }

    /**
     *  An accessor that returns the value of the family property.
     *
     * @example
     * ```typescript
     *  @ViewChild("MyIcon")
     * public icon: IgxIconComponent;
     * ngAfterViewInit() {
     *    let iconFamily = this.icon.getFamily;
     * }
     * ```
     */
    public get getFamily(): string {
        return this.iconRef.family;
    }

    /**
     *  An accessor that returns the value of the active property.
     *
     * @example
     * ```typescript
     * @ViewChild("MyIcon")
     * public icon: IgxIconComponent;
     * ngAfterViewInit() {
     *    let iconActive = this.icon.getActive;
     * }
     * ```
     */
    public get getActive(): boolean {
        return this.active;
    }

    /**
     * An accessor that returns the value of the iconName property.
     *
     * @example
     * ```typescript
     * @ViewChild("MyIcon")
     * public icon: IgxIconComponent;
     * ngAfterViewInit() {
     *    let name = this.icon.getName;
     * }
     * ```
     */
    public get getName(): string {
        return this.iconRef.name;
    }

    /**
     *  An accessor that returns the underlying SVG image as SafeHtml.
     *
     * @example
     * ```typescript
     * @ViewChild("MyIcon")
     * public icon: IgxIconComponent;
     * ngAfterViewInit() {
     *    let svg: SafeHtml = this.icon.getSvg;
     * }
     * ```
     */
    public get getSvg(): SafeHtml {
        const { name, family } = this.iconRef;

        if (this.iconService.isSvgIconCached(name, family)) {
            return this.iconService.getSvgIcon(name, family);
        }

        return null;
    }

    /**
     * @hidden
     * @internal
     */
    private setIcon() {
        this.iconRef = this.iconService.getIconRef(this.name, this.family);
        this.clearIconClasses();

        const { name, type, className } = this.iconRef;

        if (name && type === "font") {
            this.addIconClass(name);
        }

        this.addIconClass(className);
    }
}

1	import {
2	Component,
3	ElementRef,
4	HostBinding,
5	Input,
6	OnInit,
7	OnDestroy,
8	OnChanges,
9	ChangeDetectorRef,
10	booleanAttribute,
11	} from "@angular/core";
12	import { IgxIconService } from "./icon.service";
13	import type { IconReference } from "./types";
14	import { filter, takeUntil } from "rxjs/operators";
15	import { Subject } from "rxjs";
16	import { SafeHtml } from "@angular/platform-browser";
17
18	/**
19	* Icon provides a way to include material icons to markup
20	*
21	* @igxModule IgxIconModule
22	*
23	* @igxTheme igx-icon-theme
24	*
25	* @igxKeywords icon, picture
26	*
27	* @igxGroup Display
28	*
29	* @remarks
30	*
31	* The Ignite UI Icon makes it easy for developers to include material design icons directly in their markup. The icons
32	* support different icon families and can be marked as active or disabled using the `active` property. This will change the appearance
33	* of the icon.
34	*
35	* @example
36	* ```html
37	* <igx-icon family="filter-icons" active="true">home</igx-icon>
38	* ```
39	*/
40	@Component({
41	selector: "igx-icon",
42	templateUrl: "icon.component.html",
43	})
44	export class IgxIconComponent implements OnInit, OnChanges, OnDestroy {	3✔
45	private _iconRef: IconReference;
46	private _destroy$ = new Subject<void>();	63,705✔
47	private _userClasses = new Set<string>();	63,705✔
48	private _iconClasses = new Set<string>();	63,705✔
49
50	@HostBinding("class")
51	protected get elementClasses() {
52	const icon = Array.from(this._iconClasses).join(" ");	484,054✔
53	const user = Array.from(this._userClasses).join(" ");	484,054✔
54
55	return `igx-icon ${icon} ${user}`.trim();	484,054✔
56	}
57
58	private addIconClass(className: string) {
59	this._iconClasses.add(className);	127,948✔
60	}
61
62	private clearIconClasses() {
63	this._iconClasses.clear();	127,942✔
64	}
65
66	/**
67	* An accessor that returns inactive property.
68	*
69	* @example
70	* ```typescript
71	* @ViewChild("MyIcon")
72	* public icon: IgxIconComponent;
73	* ngAfterViewInit() {
74	* let iconActive = this.icon.getInactive;
75	* }
76	* ```
77	*/
78	@HostBinding("class.igx-icon--inactive")
79	public get getInactive(): boolean {
80	return !this.active;	484,054✔
81	}
82
83	/**
84	* The `aria-hidden` attribute of the icon.
85	* By default is set to 'true'.
86	*/
87	@HostBinding("attr.aria-hidden")
88	@Input()
89	public ariaHidden = true;	63,705✔
90
91	/**
92	* An @Input property that sets the value of the `family`. By default it's "material".
93	*
94	* @example
95	* ```html
96	* <igx-icon family="material">settings</igx-icon>
97	* ```
98	*/
99	@Input()
100	public family: string;
101
102	/**
103	* Set the `name` of the icon.
104	*
105	* @example
106	* ```html
107	* <igx-icon name="contains" family="filter-icons"></igx-icon>
108	* ```
109	*/
110	@Input()
111	public name: string;
112
113	/**
114	* An @Input property that allows you to disable the `active` property. By default it's applied.
115	*
116	* @example
117	* ```html
118	* <igx-icon [active]="false">settings</igx-icon>
119	* ```
120	*/
121	@Input({ transform: booleanAttribute })
122	public active = true;	63,705✔
123
124	constructor(
125	public el: ElementRef,	63,705✔
126	private iconService: IgxIconService,	63,705✔
127	private ref: ChangeDetectorRef,	63,705✔
128	) {
129	this.family = this.iconService.defaultFamily.name;	63,705✔
130
131	this.iconService.iconLoaded	63,705✔
132	.pipe(
133	filter((e) => e.name === this.name && e.family === this.family),	70,617✔
134	takeUntil(this._destroy$),
135	)
136	.subscribe(() => {
137	this.setIcon();	3✔
138	this.ref.detectChanges()	3✔
139	});
140	}
141
142	/**
143	* @hidden
144	* @internal
145	*/
146	public ngOnInit() {
147	this.setIcon();	63,705✔
148	}
149
150	/**
151	* @hidden
152	* @internal
153	*/
154	public ngOnChanges() {
155	this.setIcon();	64,234✔
156	}
157
158	/**
159	* @hidden
160	* @internal
161	*/
162	public ngOnDestroy() {
163	this._destroy$.next();	63,413✔
164	this._destroy$.complete();	63,413✔
165	}
166
167	protected get iconRef() {
168	return this._iconRef;	1,580,054✔
169	}
170
171	protected set iconRef(ref: IconReference) {
172	this._iconRef = ref;	127,942✔
173	}
174
175	/**
176	* An accessor that returns the value of the family property.
177	*
178	* @example
179	* ```typescript
180	* @ViewChild("MyIcon")
181	* public icon: IgxIconComponent;
182	* ngAfterViewInit() {
183	* let iconFamily = this.icon.getFamily;
184	* }
185	* ```
186	*/
187	public get getFamily(): string {
188	return this.iconRef.family;	3✔
189	}
190
191	/**
192	* An accessor that returns the value of the active property.
193	*
194	* @example
195	* ```typescript
196	* @ViewChild("MyIcon")
197	* public icon: IgxIconComponent;
198	* ngAfterViewInit() {
199	* let iconActive = this.icon.getActive;
200	* }
201	* ```
202	*/
203	public get getActive(): boolean {
204	return this.active;	5✔
205	}
206
207	/**
208	* An accessor that returns the value of the iconName property.
209	*
210	* @example
211	* ```typescript
212	* @ViewChild("MyIcon")
213	* public icon: IgxIconComponent;
214	* ngAfterViewInit() {
215	* let name = this.icon.getName;
216	* }
217	* ```
218	*/
219	public get getName(): string {
220	return this.iconRef.name;	2✔
221	}
222
223	/**
224	* An accessor that returns the underlying SVG image as SafeHtml.
225	*
226	* @example
227	* ```typescript
228	* @ViewChild("MyIcon")
229	* public icon: IgxIconComponent;
230	* ngAfterViewInit() {
231	* let svg: SafeHtml = this.icon.getSvg;
232	* }
233	* ```
234	*/
235	public get getSvg(): SafeHtml {
236	const { name, family } = this.iconRef;	40,396✔
237
238	if (this.iconService.isSvgIconCached(name, family)) {	40,396✔
239	return this.iconService.getSvgIcon(name, family);	40,396✔
240	}
241
242	return null;	×
243	}
244
245	/**
246	* @hidden
247	* @internal
248	*/
249	private setIcon() {
250	this.iconRef = this.iconService.getIconRef(this.name, this.family);	127,942✔
251	this.clearIconClasses();	127,942✔
252
253	const { name, type, className } = this.iconRef;	127,942✔
254
255	if (name && type === "font") {	127,942✔
256	this.addIconClass(name);	6✔
257	}
258
259	this.addIconClass(className);	127,942✔
260	}
261	}

IgniteUI / igniteui-angular / 17121302453

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous