feat(icons): add the ability to replace icons via service

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

@@ -11,7 +11,7 @@
             [title]="resourceStrings.igx_action_strip_button_more_title"
             [igxDropDownItemNavigation]="dropdown"
         >
-            <igx-icon>more_vert</igx-icon>
+            <igx-icon family="default" name="more_vert"></igx-icon>
         </button>
     </ng-container>
     <igx-drop-down #dropdown>

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

@@ -29,15 +29,14 @@ import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
 import { getCurrentResourceStrings } from '../core/i18n/resources';
 import { IgxIconButtonDirective } from '../directives/button/icon-button.directive';
 import { IgxActionStripToken } from './token';
+import { IgxIconService } from '../icon/icon.service';
 
 @Directive({
     selector: '[igxActionStripMenuItem]',
     standalone: true
 })
 export class IgxActionStripMenuItemDirective {
-    constructor(
-        public templateRef: TemplateRef<any>
-    ) { }
+    constructor(public templateRef: TemplateRef<any>) {}
 }
 
 /**
@@ -183,7 +182,14 @@ export class IgxActionStripComponent implements IgxActionStripToken, AfterConten
         private renderer: Renderer2,
         protected el: ElementRef,
         /** @hidden @internal **/
-        public cdr: ChangeDetectorRef) {}
+        public cdr: ChangeDetectorRef,
+        protected _iconService: IgxIconService,
+    ) {
+        this._iconService.addIconRef('more_vert', 'default', {
+            name: 'more_vert',
+            family: 'material',
+        });
+    }
 
     /**
      * Menu Items list.

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

@@ -168,5 +168,7 @@ export class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective
     private registerIcons() {
         this.iconService.addSvgIconFromText(addRow.name, addRow.value, 'imx-icons', true,);
         this.iconService.addSvgIconFromText(addChild.name, addChild.value, 'imx-icons', true);
+        this.iconService.addIconRef(addRow.name, 'default', { name: addRow.name, family: 'imx-icons' });
+        this.iconService.addIconRef(addChild.name, 'default', { name: addChild.name, family: 'imx-icons' });
     }
 }

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

@@ -1,6 +1,6 @@
 <ng-container *ngIf="isRowContext">
-    <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>
-    <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>
-    <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>
-    <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>
-</ng-container>
+    <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>
+    <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>
+    <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>
+    <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>
+</ng-container>

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

@@ -131,6 +131,23 @@ export class IgxGridPinningActionsComponent extends IgxGridActionsBaseDirective
             this.iconService.addSvgIconFromText(unpinLeft.name, unpinLeft.value, 'imx-icons', true);
             this.iconService.addSvgIconFromText(jumpDown.name, jumpDown.value, 'imx-icons', true);
             this.iconService.addSvgIconFromText(jumpUp.name, jumpDown.value, 'imx-icons', true);
+
+            this.iconService.addIconRef(pinLeft.name, "default", {
+                name: pinLeft.name,
+                family: "imx-icons",
+            });
+            this.iconService.addIconRef(unpinLeft.name, "default", {
+                name: unpinLeft.name,
+                family: "imx-icons",
+            });
+            this.iconService.addIconRef(jumpDown.name, "default", {
+                name: jumpDown.name,
+                family: "imx-icons",
+            });
+            this.iconService.addIconRef(jumpUp.name, "default", {
+                name: jumpDown.name,
+                family: "imx-icons",
+            });
         }
     }
 }

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

@@ -11,6 +11,7 @@ import { getCurrentResourceStrings } from '../core/i18n/resources';
 import { KeyboardNavigationService } from './calendar.services';
 import { getYearRange, isDateInRanges } from './common/helpers';
 import { CalendarDay } from './common/model';
+import { IgxIconService } from '../icon/icon.service';
 
 /** @hidden @internal */
 @Directive({
@@ -239,6 +240,25 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
         year: false
     };
 
+    private _icons = [
+        {
+            family: 'default',
+            name: 'arrow_next',
+            ref: {
+                name: 'keyboard_arrow_right',
+                family: 'material',
+            }
+        },
+        {
+            family: 'default',
+            name: 'arrow_prev',
+            ref: {
+                name: 'keyboard_arrow_left',
+                family: 'material',
+            }
+        }
+    ];
+
     /**
      * An accessor that sets the resource strings.
      * By default it uses EN resources.
@@ -654,10 +674,16 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
         @Inject(LOCALE_ID)
         protected _localeId: string,
         protected keyboardNavigation?: KeyboardNavigationService,
-        protected cdr?: ChangeDetectorRef
+        protected cdr?: ChangeDetectorRef,
+        protected iconService?: IgxIconService,
     ) {
         this.locale = _localeId;
         this.viewDate = this.viewDate ? this.viewDate : new Date();
+
+        for (const icon of this._icons) {
+            this.iconService?.addIconRef(icon.name, icon.family, icon.ref);
+        }
+
         this.initFormatters();
     }
 
@@ -700,7 +726,7 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
         if (typeof value === 'string') {
             value = DateTimeUtil.parseIsoDate(value);
         }
- 
+
         if (value === null || value === undefined || (Array.isArray(value) && value.length === 0)) {
             return;
         }

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

@@ -65,15 +65,14 @@
     <span>{{ getDecadeRange().start }} - {{ getDecadeRange().end }}</span>
 </ng-template>
 
-<!-- TODO: Make arrows templatable via external templates and based on theme -->
 <!-- Previous arrow icon -->
 <ng-template #prevArrow let-obj>
-    <igx-icon aria-hidden="true">keyboard_arrow_left</igx-icon>
+    <igx-icon aria-hidden="true" family="default" name="arrow_prev"></igx-icon>
 </ng-template>
 
 <!-- Next arrow icon -->
 <ng-template #nextArrow let-obj>
-    <igx-icon aria-hidden="true">keyboard_arrow_right</igx-icon>
+    <igx-icon aria-hidden="true" family="default" name="arrow_next"></igx-icon>
 </ng-template>
 
 <!-- Previous picker button -->

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

@@ -31,6 +31,7 @@ import {
     isDateInRanges,
 } from "../common/helpers";
 import { CalendarDay } from '../common/model';
+import { IgxIconService } from '../../icon/icon.service';
 
 let NEXT_ID = 0;
 
@@ -206,8 +207,9 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective {
         @Inject(LOCALE_ID) _localeId: string,
         protected el: ElementRef,
         public override cdr: ChangeDetectorRef,
+        protected override iconService: IgxIconService
     ) {
-        super(platform, _localeId);
+        super(platform, _localeId, null, cdr, iconService);
     }
 
     /**

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

@@ -1,11 +1,11 @@
 <!-- Previous arrow icon -->
 <ng-template #prevArrow let-obj>
-    <igx-icon aria-hidden="true">keyboard_arrow_left</igx-icon>
+    <igx-icon aria-hidden="true" family="default" name="arrow_prev"></igx-icon>
 </ng-template>
 
 <!-- Next arrow icon -->
 <ng-template #nextArrow let-obj>
-    <igx-icon aria-hidden="true">keyboard_arrow_right</igx-icon>
+    <igx-icon aria-hidden="true" family="default" name="arrow_next"></igx-icon>
 </ng-template>
 
 <!-- Previous picker button -->

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

@@ -7,28 +7,14 @@
 <ng-template #defaultNextButton let-disabled>
     <span class="igx-nav-arrow"
           [class.igx-nav-arrow--disabled]="disabled">
-        <igx-icon>arrow_forward</igx-icon>
+        <igx-icon aria-hidden="true" family="default" name="carousel_next"></igx-icon>
     </span>
 </ng-template>
 
 <ng-template #defaultPrevButton let-disabled>
     <span class="igx-nav-arrow"
           [class.igx-nav-arrow--disabled]="disabled">
-        <igx-icon>arrow_back</igx-icon>
-    </span>
-</ng-template>
-
-<ng-template #indigoPrevButton let-disabled>
-    <span class="igx-nav-arrow"
-        [class.igx-nav-arrow--disabled]="disabled">
-        <igx-icon>chevron_left</igx-icon>
-    </span>
-</ng-template>
-
-<ng-template #indigoNextButton let-disabled>
-    <span class="igx-nav-arrow"
-        [class.igx-nav-arrow--disabled]="disabled">
-        <igx-icon>chevron_right</igx-icon>
+        <igx-icon aria-hidden="true" family="default" name="carousel_prev"></igx-icon>
     </span>
 </ng-template>