• Home
  • Features
  • Pricing
  • Docs
  • Announcements
  • Sign In

IgniteUI / igniteui-angular / 13548823408

26 Feb 2025 04:36PM CUT coverage: 91.555% (-0.04%) from 91.599%
13548823408

Pull #15223

github

web-flow
Merge 3ac8087aa into 786685675
Pull Request #15223: fix(pivot-grid): added createRow method for grid based events - 19.0

12997 of 15250 branches covered (85.23%)

0 of 18 new or added lines in 2 files covered. (0.0%)

135 existing lines in 23 files now uncovered.

26344 of 28774 relevant lines covered (91.55%)

34046.37 hits per line

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

97.37
/projects/igniteui-angular/src/lib/icon/icon.component.ts
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
import { NgIf, NgTemplateOutlet } from "@angular/common";
18

19
/**
20
 * Icon provides a way to include material icons to markup
21
 *
22
 * @igxModule IgxIconModule
23
 *
24
 * @igxTheme igx-icon-theme
25
 *
26
 * @igxKeywords icon, picture
27
 *
28
 * @igxGroup Display
29
 *
30
 * @remarks
31
 *
32
 * The Ignite UI Icon makes it easy for developers to include material design icons directly in their markup. The icons
33
 * support different icon families and can be marked as active or disabled using the `active` property. This will change the appearance
34
 * of the icon.
35
 *
36
 * @example
37
 * ```html
38
 * <igx-icon family="filter-icons" active="true">home</igx-icon>
39
 * ```
40
 */
41
@Component({
42
    selector: "igx-icon",
43
    templateUrl: "icon.component.html",
44
})
45
export class IgxIconComponent implements OnInit, OnChanges, OnDestroy {
2✔
46
    private _iconRef: IconReference;
47
    private _destroy$ = new Subject<void>();
64,346✔
48
    private _userClasses = new Set<string>();
64,346✔
49
    private _iconClasses = new Set<string>();
64,346✔
50

51
    @HostBinding("class")
52
    protected get elementClasses() {
53
        const icon = Array.from(this._iconClasses).join(" ");
362,965✔
54
        const user = Array.from(this._userClasses).join(" ");
362,965✔
55

56
        return `igx-icon ${icon} ${user}`.trim();
362,965✔
57
    }
58

59
    private addIconClass(className: string) {
60
        this._iconClasses.add(className);
128,942✔
61
    }
62

63
    private clearIconClasses() {
64
        this._iconClasses.clear();
128,936✔
65
    }
66

67
    /**
68
     *  An accessor that returns inactive property.
69
     *
70
     * @example
71
     * ```typescript
72
     * @ViewChild("MyIcon")
73
     * public icon: IgxIconComponent;
74
     * ngAfterViewInit() {
75
     *    let iconActive = this.icon.getInactive;
76
     * }
77
     * ```
78
     */
79
    @HostBinding("class.igx-icon--inactive")
80
    public get getInactive(): boolean {
81
        return !this.active;
362,965✔
82
    }
83

84
    /**
85
     * An @Input property that sets the value of the `family`. By default it's "material".
86
     *
87
     * @example
88
     * ```html
89
     * <igx-icon family="material">settings</igx-icon>
90
     * ```
91
     */
92
    @Input()
93
    public family: string;
94

95
    /**
96
     *  Set the `name` of the icon.
97
     *
98
     *  @example
99
     * ```html
100
     * <igx-icon name="contains" family="filter-icons"></igx-icon>
101
     * ```
102
     */
103
    @Input()
104
    public name: string;
105

106
    /**
107
     * An @Input property that allows you to disable the `active` property. By default it's applied.
108
     *
109
     * @example
110
     * ```html
111
     * <igx-icon [active]="false">settings</igx-icon>
112
     * ```
113
     */
114
    @Input({ transform: booleanAttribute })
115
    public active = true;
64,346✔
116

117
    constructor(
118
        public el: ElementRef,
64,346✔
119
        private iconService: IgxIconService,
64,346✔
120
        private ref: ChangeDetectorRef,
64,346✔
121
    ) {
122
        this.family = this.iconService.defaultFamily.name;
64,346✔
123

124
        this.iconService.iconLoaded
64,346✔
125
            .pipe(
126
                filter((e) => e.name === this.name && e.family === this.family),
48,962✔
127
                takeUntil(this._destroy$),
128
            )
129
            .subscribe(() => {
130
                this.setIcon();
3✔
131
                this.ref.detectChanges()
3✔
132
            });
133
    }
134

135
    /**
136
     * @hidden
137
     * @internal
138
     */
139
    public ngOnInit() {
140
        this.setIcon();
64,346✔
141
    }
142

143
    /**
144
     * @hidden
145
     * @internal
146
     */
147
    public ngOnChanges() {
148
        this.setIcon();
64,587✔
149
    }
150

151
    /**
152
     * @hidden
153
     * @internal
154
     */
155
    public ngOnDestroy() {
156
        this._destroy$.next();
64,026✔
157
        this._destroy$.complete();
64,026✔
158
    }
159

160
    protected get iconRef() {
161
        return this._iconRef;
1,217,781✔
162
    }
163

164
    protected set iconRef(ref: IconReference) {
165
        this._iconRef = ref;
128,936✔
166
    }
167

168
    /**
169
     *  An accessor that returns the value of the family property.
170
     *
171
     * @example
172
     * ```typescript
173
     *  @ViewChild("MyIcon")
174
     * public icon: IgxIconComponent;
175
     * ngAfterViewInit() {
176
     *    let iconFamily = this.icon.getFamily;
177
     * }
178
     * ```
179
     */
180
    public get getFamily(): string {
181
        return this.iconRef.family;
3✔
182
    }
183

184
    /**
185
     *  An accessor that returns the value of the active property.
186
     *
187
     * @example
188
     * ```typescript
189
     * @ViewChild("MyIcon")
190
     * public icon: IgxIconComponent;
191
     * ngAfterViewInit() {
192
     *    let iconActive = this.icon.getActive;
193
     * }
194
     * ```
195
     */
196
    public get getActive(): boolean {
197
        return this.active;
5✔
198
    }
199

200
    /**
201
     * An accessor that returns the value of the iconName property.
202
     *
203
     * @example
204
     * ```typescript
205
     * @ViewChild("MyIcon")
206
     * public icon: IgxIconComponent;
207
     * ngAfterViewInit() {
208
     *    let name = this.icon.getName;
209
     * }
210
     * ```
211
     */
212
    public get getName(): string {
213
        return this.iconRef.name;
2✔
214
    }
215

216
    /**
217
     *  An accessor that returns the underlying SVG image as SafeHtml.
218
     *
219
     * @example
220
     * ```typescript
221
     * @ViewChild("MyIcon")
222
     * public icon: IgxIconComponent;
223
     * ngAfterViewInit() {
224
     *    let svg: SafeHtml = this.icon.getSvg;
225
     * }
226
     * ```
227
     */
228
    public get getSvg(): SafeHtml {
229
        const { name, family } = this.iconRef;
29,990✔
230

231
        if (this.iconService.isSvgIconCached(name, family)) {
29,990✔
232
            return this.iconService.getSvgIcon(name, family);
29,990✔
233
        }
234

UNCOV
235
        return null;
×
236
    }
237

238
    /**
239
     * @hidden
240
     * @internal
241
     */
242
    private setIcon() {
243
        this.iconRef = this.iconService.getIconRef(this.name, this.family);
128,936✔
244
        this.clearIconClasses();
128,936✔
245

246
        const { name, type, className } = this.iconRef;
128,936✔
247

248
        if (name && type === "font") {
128,936✔
249
            this.addIconClass(name);
6✔
250
        }
251

252
        this.addIconClass(className);
128,936✔
253
    }
254
}
STATUS · Troubleshooting · Open an Issue · Sales · Support · CAREERS · ENTERPRISE · START FREE · SCHEDULE DEMO
ANNOUNCEMENTS · TWITTER · TOS & SLA · Supported CI Services · What's a CI service? · Automated Testing

© 2025 Coveralls, Inc