refactor(icons): remove unnecessary icons and reuse the icon registration logic in Grid Filtering and QueryBuilder

projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts

@@ -1,6 +1,8 @@
 import {
+    Inject,
     Injectable,
     OnDestroy,
+    Optional,
 } from '@angular/core';
 import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
 import { IFilteringExpression, FilteringLogic } from '../../data-operations/filtering-expression.interface';
@@ -14,12 +16,13 @@ import { IgxOverlayService } from '../../services/overlay/overlay';
 import { useAnimation } from '@angular/animations';
 import { AbsoluteScrollStrategy } from '../../services/overlay/scroll/absolute-scroll-strategy';
 import { IgxIconService } from '../../icon/icon.service';
-import { editor, pinLeft, unpinLeft } from '@igniteui/material-icons-extended';
 import { ExpressionUI, generateExpressionsList } from './excel-style/common';
 import { ColumnType, GridType } from '../common/grid.interface';
 import { formatDate } from '../../core/utils';
 import { ExcelStylePositionStrategy } from './excel-style/excel-style-position-strategy';
 import { fadeIn } from 'igniteui-angular/animations';
+import { FILTERING_ICONS } from '../../icon/filtering-icons';
+import { pinLeft, unpinLeft } from '@igniteui/material-icons-extended';
 
 /**
  * @hidden
@@ -55,6 +58,7 @@ export class IgxFilteringService implements OnDestroy {
     constructor(
         private iconService: IgxIconService,
         protected _overlayService: IgxOverlayService,
+        @Optional() @Inject(FILTERING_ICONS) _filteringIcons: any
     ) { }
 
     public ngOnDestroy(): void {
@@ -318,10 +322,6 @@ export class IgxFilteringService implements OnDestroy {
      * Register filtering SVG icons in the icon service.
      */
     public registerSVGIcons(): void {
-        const editorIcons = editor as any[];
-        editorIcons.forEach(icon => {
-            this.iconService.addSvgIconFromText(icon.name, icon.value, 'imx-icons');
-        });
         this.iconService.addSvgIconFromText(pinLeft.name, pinLeft.value, 'imx-icons');
         this.iconService.addSvgIconFromText(unpinLeft.name, unpinLeft.value, 'imx-icons');
     }

projects/igniteui-angular/src/lib/icon/filtering-icons.ts

@@ -0,0 +1,44 @@
+import { InjectionToken, inject } from '@angular/core';
+import { IMXIcon, contains, doesNotContain, endsWith, equals, greaterThan, greaterThanOrEqual, isAfter, isBefore, isEmpty, isFalse, isNull, isNotNull, isTrue, lastMonth, lastYear, lessThan, lessThanOrEqual, nextMonth, nextYear, notEmpty, notEqual, selectAll, startsWith, thisMonth, thisYear, today, ungroup, yesterday } from '@igniteui/material-icons-extended';
+import { IgxIconService } from './icon.service';
+
+export const filteringIcons: IMXIcon[] = [
+    contains,
+    doesNotContain,
+    endsWith,
+    equals,
+    greaterThan,
+    greaterThanOrEqual,
+    isAfter,
+    isBefore,
+    isEmpty,
+    isFalse,
+    isNotNull,
+    isNull,
+    isTrue,
+    lastMonth,
+    lastYear,
+    lessThan,
+    lessThanOrEqual,
+    nextMonth,
+    nextYear,
+    notEmpty,
+    notEqual,
+    selectAll,
+    startsWith,
+    thisMonth,
+    thisYear,
+    today,
+    ungroup,
+    yesterday
+];
+export const FILTERING_ICONS = new InjectionToken<void>('FILTERING_ICONS', {
+    providedIn: 'root',
+    factory: () => registerFilteringSVGIconsFactory(inject(IgxIconService))
+});
+
+export function registerFilteringSVGIconsFactory(iconService: IgxIconService) {
+    filteringIcons.forEach(icon => {
+        iconService.addSvgIconFromText(icon.name, icon.value, 'imx-icons');
+    });
+}

projects/igniteui-angular/src/lib/query-builder/query-builder.component.ts

@@ -1,12 +1,11 @@
-import { AfterViewInit, ContentChild, EventEmitter, LOCALE_ID, Output, Pipe, PipeTransform } from '@angular/core';
+import { AfterViewInit, ContentChild, EventEmitter, LOCALE_ID, Optional, Output, Pipe, PipeTransform } from '@angular/core';
 import { getLocaleFirstDayOfWeek, NgIf, NgFor, NgTemplateOutlet, NgClass, DatePipe } from '@angular/common';
 import { Inject } from '@angular/core';
 import {
     Component, Input, ViewChild, ChangeDetectorRef, ViewChildren, QueryList, ElementRef, OnDestroy, HostBinding
 } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { Subject } from 'rxjs';
-import { editor } from '@igniteui/material-icons-extended';
 import { IButtonGroupEventArgs, IgxButtonGroupComponent } from '../buttonGroup/buttonGroup.component';
 import { IgxChipComponent } from '../chips/chip.component';
 import { IQueryBuilderResourceStrings, QueryBuilderResourceStringsEN } from '../core/i18n/query-builder-resources';
@@ -37,6 +36,7 @@ import { IgxPrefixDirective } from '../directives/prefix/prefix.directive';
 import { IgxIconComponent } from '../icon/icon.component';
 import { getCurrentResourceStrings } from '../core/i18n/resources';
 import { IgxIconButtonDirective } from '../directives/button/icon-button.directive';
+import { FILTERING_ICONS } from '../icon/filtering-icons';
 
 const DEFAULT_PIPE_DATE_FORMAT = 'mediumDate';
 const DEFAULT_PIPE_TIME_FORMAT = 'mediumTime';
@@ -146,7 +146,6 @@ export class IgxQueryBuilderComponent implements AfterViewInit, OnDestroy {
         this._fields = fields;
 
         if (this._fields) {
-            this.registerSVGIcons();
 
             this._fields.forEach(field => {
                 this.setFilters(field);
@@ -398,7 +397,8 @@ export class IgxQueryBuilderComponent implements AfterViewInit, OnDestroy {
         protected iconService: IgxIconService,
         protected platform: PlatformUtil,
         protected el: ElementRef,
-        @Inject(LOCALE_ID) protected _localeId: string) {
+        @Inject(LOCALE_ID) protected _localeId: string,
+        @Optional() @Inject(FILTERING_ICONS) _filteringIcons: any) {
         this.locale = this.locale || this._localeId;
     }
 
@@ -1207,13 +1207,5 @@ export class IgxQueryBuilderComponent implements AfterViewInit, OnDestroy {
         this.rootGroup = this.createExpressionGroupItem(this.expressionTree);
         this.currentGroup = this.rootGroup;
     }
-
-    private registerSVGIcons(): void {
-        const editorIcons = editor as any[];
-
-        editorIcons.forEach((icon) => {
-            this.iconService.addSvgIconFromText(icon.name, icon.value, 'imx-icons');
-        });
-    }
 }