Skip to content

Commit a1a2407

Browse files
simeonoffChronosSFrkaraivanov
authored
feat(icons): add the ability to replace icons via service (#14035)
* feat(icons): add the ability to replace icons via service --------- Co-authored-by: Stamen Stoychev <[email protected]> Co-authored-by: Radoslav Karaivanov <[email protected]>
1 parent 0d53ff4 commit a1a2407

File tree

111 files changed

+2989
-797
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

111 files changed

+2989
-797
lines changed

‎projects/igniteui-angular/src/lib/action-strip/action-strip.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
[title]="resourceStrings.igx_action_strip_button_more_title"
1212
[igxDropDownItemNavigation]="dropdown"
1313
>
14-
<igx-icon>more_vert</igx-icon>
14+
<igx-icon family="default" name="more_vert"></igx-icon>
1515
</button>
1616
</ng-container>
1717
<igx-drop-down #dropdown>

‎projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,14 @@ import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
2929
import { getCurrentResourceStrings } from '../core/i18n/resources';
3030
import { IgxIconButtonDirective } from '../directives/button/icon-button.directive';
3131
import { IgxActionStripToken } from './token';
32+
import { IgxIconService } from '../icon/icon.service';
3233

3334
@Directive({
3435
selector: '[igxActionStripMenuItem]',
3536
standalone: true
3637
})
3738
export class IgxActionStripMenuItemDirective {
38-
constructor(
39-
public templateRef: TemplateRef<any>
40-
) { }
39+
constructor(public templateRef: TemplateRef<any>) {}
4140
}
4241

4342
/**
@@ -183,7 +182,14 @@ export class IgxActionStripComponent implements IgxActionStripToken, AfterConten
183182
private renderer: Renderer2,
184183
protected el: ElementRef,
185184
/** @hidden @internal **/
186-
public cdr: ChangeDetectorRef) {}
185+
public cdr: ChangeDetectorRef,
186+
protected _iconService: IgxIconService,
187+
) {
188+
this._iconService.addIconRef('more_vert', 'default', {
189+
name: 'more_vert',
190+
family: 'material',
191+
});
192+
}
187193

188194
/**
189195
* Menu Items list.

‎projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -168,5 +168,7 @@ export class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective
168168
private registerIcons() {
169169
this.iconService.addSvgIconFromText(addRow.name, addRow.value, 'imx-icons', true,);
170170
this.iconService.addSvgIconFromText(addChild.name, addChild.value, 'imx-icons', true);
171+
this.iconService.addIconRef(addRow.name, 'default', { name: addRow.name, family: 'imx-icons' });
172+
this.iconService.addIconRef(addChild.name, 'default', { name: addChild.name, family: 'imx-icons' });
171173
}
172174
}

‎projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<ng-container *ngIf="isRowContext">
2-
<igx-grid-action-button *ngIf="inPinnedArea && pinnedTop" [asMenuItem]="asMenuItems" iconSet="imx-icons" iconName="jump-down" [labelText]="grid.resourceStrings.igx_grid_actions_jumpDown_label" (actionClick)="scrollToRow($event)"></igx-grid-action-button>
3-
<igx-grid-action-button *ngIf="inPinnedArea && !pinnedTop" [asMenuItem]="asMenuItems" iconSet="imx-icons" iconName="jump-up" [labelText]="grid.resourceStrings.igx_grid_actions_jumpUp_label" (actionClick)="scrollToRow($event)"></igx-grid-action-button>
4-
<igx-grid-action-button *ngIf="!pinned" [asMenuItem]="asMenuItems" iconSet="imx-icons" iconName="pin-left" [labelText]="grid.resourceStrings.igx_grid_actions_pin_label" (actionClick)="pin($event)"></igx-grid-action-button>
5-
<igx-grid-action-button *ngIf="pinned" [asMenuItem]="asMenuItems" iconSet="imx-icons" iconName="unpin-left" [labelText]="grid.resourceStrings.igx_grid_actions_unpin_label" (actionClick)="unpin($event)"></igx-grid-action-button>
6-
</ng-container>
2+
<igx-grid-action-button *ngIf="inPinnedArea && pinnedTop" [asMenuItem]="asMenuItems" iconSet="default" iconName="jump-down" [labelText]="grid.resourceStrings.igx_grid_actions_jumpDown_label" (actionClick)="scrollToRow($event)"></igx-grid-action-button>
3+
<igx-grid-action-button *ngIf="inPinnedArea && !pinnedTop" [asMenuItem]="asMenuItems" iconSet="default" iconName="jump-up" [labelText]="grid.resourceStrings.igx_grid_actions_jumpUp_label" (actionClick)="scrollToRow($event)"></igx-grid-action-button>
4+
<igx-grid-action-button *ngIf="!pinned" [asMenuItem]="asMenuItems" iconSet="default" iconName="pin-left" [labelText]="grid.resourceStrings.igx_grid_actions_pin_label" (actionClick)="pin($event)"></igx-grid-action-button>
5+
<igx-grid-action-button *ngIf="pinned" [asMenuItem]="asMenuItems" iconSet="default" iconName="unpin-left" [labelText]="grid.resourceStrings.igx_grid_actions_unpin_label" (actionClick)="unpin($event)"></igx-grid-action-button>
6+
</ng-container>

‎projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,23 @@ export class IgxGridPinningActionsComponent extends IgxGridActionsBaseDirective
131131
this.iconService.addSvgIconFromText(unpinLeft.name, unpinLeft.value, 'imx-icons', true);
132132
this.iconService.addSvgIconFromText(jumpDown.name, jumpDown.value, 'imx-icons', true);
133133
this.iconService.addSvgIconFromText(jumpUp.name, jumpDown.value, 'imx-icons', true);
134+
135+
this.iconService.addIconRef(pinLeft.name, "default", {
136+
name: pinLeft.name,
137+
family: "imx-icons",
138+
});
139+
this.iconService.addIconRef(unpinLeft.name, "default", {
140+
name: unpinLeft.name,
141+
family: "imx-icons",
142+
});
143+
this.iconService.addIconRef(jumpDown.name, "default", {
144+
name: jumpDown.name,
145+
family: "imx-icons",
146+
});
147+
this.iconService.addIconRef(jumpUp.name, "default", {
148+
name: jumpDown.name,
149+
family: "imx-icons",
150+
});
134151
}
135152
}
136153
}

‎projects/igniteui-angular/src/lib/calendar/calendar-base.ts

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { getCurrentResourceStrings } from '../core/i18n/resources';
1111
import { KeyboardNavigationService } from './calendar.services';
1212
import { getYearRange, isDateInRanges } from './common/helpers';
1313
import { CalendarDay } from './common/model';
14+
import { IgxIconService } from '../icon/icon.service';
1415

1516
/** @hidden @internal */
1617
@Directive({
@@ -239,6 +240,25 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
239240
year: false
240241
};
241242

243+
private _icons = [
244+
{
245+
family: 'default',
246+
name: 'arrow_next',
247+
ref: {
248+
name: 'keyboard_arrow_right',
249+
family: 'material',
250+
}
251+
},
252+
{
253+
family: 'default',
254+
name: 'arrow_prev',
255+
ref: {
256+
name: 'keyboard_arrow_left',
257+
family: 'material',
258+
}
259+
}
260+
];
261+
242262
/**
243263
* An accessor that sets the resource strings.
244264
* By default it uses EN resources.
@@ -654,10 +674,16 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
654674
@Inject(LOCALE_ID)
655675
protected _localeId: string,
656676
protected keyboardNavigation?: KeyboardNavigationService,
657-
protected cdr?: ChangeDetectorRef
677+
protected cdr?: ChangeDetectorRef,
678+
protected iconService?: IgxIconService,
658679
) {
659680
this.locale = _localeId;
660681
this.viewDate = this.viewDate ? this.viewDate : new Date();
682+
683+
for (const icon of this._icons) {
684+
this.iconService?.addIconRef(icon.name, icon.family, icon.ref);
685+
}
686+
661687
this.initFormatters();
662688
}
663689

@@ -700,7 +726,7 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
700726
if (typeof value === 'string') {
701727
value = DateTimeUtil.parseIsoDate(value);
702728
}
703-
729+
704730
if (value === null || value === undefined || (Array.isArray(value) && value.length === 0)) {
705731
return;
706732
}

‎projects/igniteui-angular/src/lib/calendar/calendar.component.html

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,15 +65,14 @@
6565
<span>{{ getDecadeRange().start }} - {{ getDecadeRange().end }}</span>
6666
</ng-template>
6767

68-
<!-- TODO: Make arrows templatable via external templates and based on theme -->
6968
<!-- Previous arrow icon -->
7069
<ng-template #prevArrow let-obj>
71-
<igx-icon aria-hidden="true">keyboard_arrow_left</igx-icon>
70+
<igx-icon aria-hidden="true" family="default" name="arrow_prev"></igx-icon>
7271
</ng-template>
7372

7473
<!-- Next arrow icon -->
7574
<ng-template #nextArrow let-obj>
76-
<igx-icon aria-hidden="true">keyboard_arrow_right</igx-icon>
75+
<igx-icon aria-hidden="true" family="default" name="arrow_next"></igx-icon>
7776
</ng-template>
7877

7978
<!-- Previous picker button -->

‎projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import {
3131
isDateInRanges,
3232
} from "../common/helpers";
3333
import { CalendarDay } from '../common/model';
34+
import { IgxIconService } from '../../icon/icon.service';
3435

3536
let NEXT_ID = 0;
3637

@@ -206,8 +207,9 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective {
206207
@Inject(LOCALE_ID) _localeId: string,
207208
protected el: ElementRef,
208209
public override cdr: ChangeDetectorRef,
210+
protected override iconService: IgxIconService
209211
) {
210-
super(platform, _localeId);
212+
super(platform, _localeId, null, cdr, iconService);
211213
}
212214

213215
/**

‎projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<!-- Previous arrow icon -->
22
<ng-template #prevArrow let-obj>
3-
<igx-icon aria-hidden="true">keyboard_arrow_left</igx-icon>
3+
<igx-icon aria-hidden="true" family="default" name="arrow_prev"></igx-icon>
44
</ng-template>
55

66
<!-- Next arrow icon -->
77
<ng-template #nextArrow let-obj>
8-
<igx-icon aria-hidden="true">keyboard_arrow_right</igx-icon>
8+
<igx-icon aria-hidden="true" family="default" name="arrow_next"></igx-icon>
99
</ng-template>
1010

1111
<!-- Previous picker button -->

‎projects/igniteui-angular/src/lib/carousel/carousel.component.html

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,28 +7,14 @@
77
<ng-template #defaultNextButton let-disabled>
88
<span class="igx-nav-arrow"
99
[class.igx-nav-arrow--disabled]="disabled">
10-
<igx-icon>arrow_forward</igx-icon>
10+
<igx-icon aria-hidden="true" family="default" name="carousel_next"></igx-icon>
1111
</span>
1212
</ng-template>
1313

1414
<ng-template #defaultPrevButton let-disabled>
1515
<span class="igx-nav-arrow"
1616
[class.igx-nav-arrow--disabled]="disabled">
17-
<igx-icon>arrow_back</igx-icon>
18-
</span>
19-
</ng-template>
20-
21-
<ng-template #indigoPrevButton let-disabled>
22-
<span class="igx-nav-arrow"
23-
[class.igx-nav-arrow--disabled]="disabled">
24-
<igx-icon>chevron_left</igx-icon>
25-
</span>
26-
</ng-template>
27-
28-
<ng-template #indigoNextButton let-disabled>
29-
<span class="igx-nav-arrow"
30-
[class.igx-nav-arrow--disabled]="disabled">
31-
<igx-icon>chevron_right</igx-icon>
17+
<igx-icon aria-hidden="true" family="default" name="carousel_prev"></igx-icon>
3218
</span>
3319
</ng-template>
3420

0 commit comments

Comments
 (0)