refactor(icon-service): update icon reference names and registration (#14598)

* refactor(icon-service): update icon reference names and registration
---------

Co-authored-by: Stamen Stoychev <[email protected]>
Co-authored-by: Damyan Petev <[email protected]>

Author: 3 people

projects/igniteui-angular-elements/src/lib/icon.broadcast.service.ts

@@ -1,6 +1,7 @@
 import { Injectable, Optional } from '@angular/core';
 import { PlatformUtil } from '../../../igniteui-angular/src/lib/core/utils';
-import { IconMeta, IgxIconService } from '../../../igniteui-angular/src/lib/icon/icon.service';
+import { IgxIconService } from '../../../igniteui-angular/src/lib/icon/icon.service';
+import { IconMeta } from '../../../igniteui-angular/src/lib/icon/public_api';
 
 
 export interface SvgIcon {

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

@@ -29,7 +29,6 @@ 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]',
@@ -202,13 +201,7 @@ export class IgxActionStripComponent implements IgxActionStripToken, AfterConten
         protected el: ElementRef,
         /** @hidden @internal **/
         public cdr: ChangeDetectorRef,
-        protected _iconService: IgxIconService,
-    ) {
-        this._iconService.addIconRef('more_vert', 'default', {
-            name: 'more_vert',
-            family: 'material',
-        });
-    }
+    ) { }
 
     /**
      * Menu Items list.
@@ -336,4 +329,3 @@ export class IgxActionStripComponent implements IgxActionStripToken, AfterConten
         }
     }
 }
-

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

@@ -1,8 +1,8 @@
 
 <ng-container *ngIf="isRowContext">
     <igx-grid-action-button *ngIf="!disabled && editRow" [asMenuItem]="asMenuItems" iconName="edit" [labelText]="grid.resourceStrings.igx_grid_actions_edit_label" (actionClick)="startEdit($event)"></igx-grid-action-button>
-    <igx-grid-action-button *ngIf="addRow && isRootRow" [asMenuItem]="asMenuItems" iconName="add-row" iconSet="imx-icons" [labelText]="grid.resourceStrings.igx_grid_actions_add_label" (actionClick)="addRowHandler($event)"></igx-grid-action-button>
-    <igx-grid-action-button *ngIf="addChild && hasChildren" [asMenuItem]="asMenuItems" iconName="add-child" iconSet="imx-icons" [labelText]="grid.resourceStrings.igx_grid_actions_add_child_label" (actionClick)="addRowHandler($event, true)"></igx-grid-action-button>
+    <igx-grid-action-button *ngIf="addRow && isRootRow" [asMenuItem]="asMenuItems" iconName="add_row" iconSet="default" [labelText]="grid.resourceStrings.igx_grid_actions_add_label" (actionClick)="addRowHandler($event)"></igx-grid-action-button>
+    <igx-grid-action-button *ngIf="addChild && hasChildren" [asMenuItem]="asMenuItems" iconName="add_child" iconSet="default" [labelText]="grid.resourceStrings.igx_grid_actions_add_child_label" (actionClick)="addRowHandler($event, true)"></igx-grid-action-button>
     <igx-grid-action-button *ngIf="!disabled && deleteRow" class="igx-action-strip__delete" classNames='igx-action-strip__menu-item--danger' [asMenuItem]="asMenuItems" iconName="delete" [labelText]="grid.resourceStrings.igx_grid_actions_delete_label" (actionClick)="deleteRowHandler($event)"></igx-grid-action-button>
 </ng-container>
 

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

@@ -178,7 +178,5 @@ 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="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>
+    <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" [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" [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.spec.ts

@@ -39,7 +39,7 @@ describe('igxGridPinningActions #grid ', () => {
             fixture.detectChanges();
             let pinningButtons = fixture.debugElement.queryAll(By.css(`igx-grid-pinning-actions button`));
             expect(pinningButtons.length).toBe(1);
-            expect(pinningButtons[0].componentInstance.iconName).toBe('pin-left');
+            expect(pinningButtons[0].componentInstance.iconName).toBe('pin');
             pinningButtons[0].triggerEventHandler('click', new Event('click'));
             actionStrip.hide();
             fixture.detectChanges();
@@ -49,7 +49,7 @@ describe('igxGridPinningActions #grid ', () => {
             fixture.detectChanges();
             pinningButtons = fixture.debugElement.queryAll(By.css(`igx-grid-pinning-actions button`));
             expect(pinningButtons.length).toBe(2);
-            expect(pinningButtons[1].componentInstance.iconName).toBe('unpin-left');
+            expect(pinningButtons[1].componentInstance.iconName).toBe('unpin');
             pinningButtons[1].triggerEventHandler('click', new Event('click'));
             actionStrip.hide();
             fixture.detectChanges();

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

@@ -140,24 +140,7 @@ export class IgxGridPinningActionsComponent extends IgxGridActionsBaseDirective
             this.iconService.addSvgIconFromText(pinLeft.name, pinLeft.value, 'imx-icons', true);
             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",
-            });
+            this.iconService.addSvgIconFromText(jumpUp.name, jumpUp.value, 'imx-icons', true);
         }
     }
 }

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

@@ -11,7 +11,6 @@ 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({
@@ -240,25 +239,6 @@ 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.
@@ -675,15 +655,9 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
         protected _localeId: string,
         protected keyboardNavigation?: KeyboardNavigationService,
         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();
     }
 

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

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

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

@@ -1,7 +1,6 @@
 import { NgIf, NgClass, NgFor, NgTemplateOutlet } from '@angular/common';
 import {
     AfterContentInit,
-    AfterViewInit,
     ChangeDetectorRef,
     Component,
     ContentChild,
@@ -37,9 +36,6 @@ import { IgxIconComponent } from '../icon/icon.component';
 import { getCurrentResourceStrings } from '../core/i18n/resources';
 import { HammerGesturesManager } from '../core/touch';
 import { CarouselIndicatorsOrientation, HorizontalAnimationType } from './enums';
-import { ThemeService } from '../services/theme/theme.service';
-import type { IgxTheme } from '../services/theme/theme.service';
-import { IgxIconService } from '../icon/icon.service';
 
 let NEXT_ID = 0;
 
@@ -89,7 +85,7 @@ export class CarouselHammerConfig extends HammerGestureConfig {
     imports: [IgxIconComponent, NgIf, NgClass, NgFor, NgTemplateOutlet]
 })
 
-export class IgxCarouselComponent extends IgxCarouselComponentBase implements OnDestroy, AfterViewInit, AfterContentInit {
+export class IgxCarouselComponent extends IgxCarouselComponentBase implements OnDestroy, AfterContentInit {
 
     /**
      * Sets the `id` of the carousel.
@@ -145,11 +141,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
         return this.gesturesSupport ? 'pan-y' : 'auto';
     }
 
-    /**
-     * @hidden @internal
-     */
-    protected theme: IgxTheme;
-
     /**
      * Sets whether the carousel should `loop` back to the first slide after reaching the last slide.
      * Default value is `true`.
@@ -398,36 +389,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
     private destroy$ = new Subject<any>();
     private differ: IterableDiffer<IgxSlideComponent> | null = null;
     private incomingSlide: IgxSlideComponent;
-    private _icons = [
-        {
-            name: 'carousel_prev',
-            family: 'default',
-            ref: new Map(Object.entries({
-                'material': {
-                    name: 'arrow_back',
-                    family: 'material'
-                },
-                'indigo': {
-                    name: 'keyboard_arrow_left',
-                    family: 'material'
-                }
-            }))
-        },
-        {
-            name: 'carousel_next',
-            family: 'default',
-            ref: new Map(Object.entries({
-                'material': {
-                    name: 'arrow_forward',
-                    family: 'material'
-                },
-                'indigo': {
-                    name: 'keyboard_arrow_right',
-                    family: 'material'
-                }
-            }))
-        }
-    ]
 
     /**
      * An accessor that sets the resource strings.
@@ -583,8 +544,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
         private iterableDiffers: IterableDiffers,
         @Inject(IgxAngularAnimationService) animationService: AnimationService,
         private platformUtil: PlatformUtil,
-        private themeService: ThemeService,
-        private iconService: IgxIconService
     ) {
         super(animationService, cdr);
         this.differ = this.iterableDiffers.find([]).create(null);
@@ -719,37 +678,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
         }
     }
 
-    /** @hidden */
-    public ngAfterViewInit() {
-        this.cdr.detach();
-
-        if (!this.theme) {
-            this.theme = this.themeService.getComponentTheme(this.element);
-        }
-
-        for (const icon of this._icons) {
-            switch(this.theme) {
-                case 'indigo':
-                    this.iconService.addIconRef(
-                        icon.name,
-                        icon.family,
-                        icon.ref.get('indigo'),
-                    );
-                    break;
-                case 'material':
-                default:
-                    this.iconService.addIconRef(
-                        icon.name,
-                        icon.family,
-                        icon.ref.get('material'),
-                    );
-            }
-        }
-
-        this.cdr.detectChanges();
-        this.cdr.reattach();
-    }
-
     /** @hidden */
     public ngAfterContentInit() {
         this.slides.changes