26023601418

Committed 18 May 2026 08:57AM UTC coverage: 4.854% (-85.3%) from 90.174%

Build # 26023601418

Build Type

Pull #17281

github

Committed by

web-flow

Commit Message

Merge e7ce7a18e into 5a85df190

Pull Request Pull Request #17281: feat: Added virtual scroll component and sample implementation

Coverage Stats

400 of 17347 branches covered (2.31%)

Branch coverage included in aggregate %.

63 of 222 new or added lines in 4 files covered. (28.38%)

27932 existing lines in 341 files now uncovered.

2022 of 32547 relevant lines covered (6.21%)

0.72 hits per line

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

2.22

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

import { Component, ElementRef, HostBinding, Input, OnInit, OnDestroy, OnChanges, ChangeDetectorRef, booleanAttribute, inject } 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 {
    public el = inject(ElementRef);
    private iconService = inject(IgxIconService);
    private ref = inject(ChangeDetectorRef);

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

IgniteUI / igniteui-angular / 26023601418

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