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,6 @@
 import {
     Injectable,
-    OnDestroy,
+    OnDestroy
 } from '@angular/core';
 import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
 import { IFilteringExpression, FilteringLogic } from '../../data-operations/filtering-expression.interface';
@@ -14,12 +14,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 { pinLeft, unpinLeft } from '@igniteui/material-icons-extended';
+import { registerFilteringSVGIcons } from '../../icon/filtering-icons';
 
 /**
  * @hidden
@@ -54,7 +55,7 @@ export class IgxFilteringService implements OnDestroy {
 
     constructor(
         private iconService: IgxIconService,
-        protected _overlayService: IgxOverlayService,
+        protected _overlayService: IgxOverlayService
     ) { }
 
     public ngOnDestroy(): void {
@@ -318,10 +319,8 @@ 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');
-        });
+        registerFilteringSVGIcons(this.iconService);
+
         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,49 @@
+import {
+    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/editor';
+import { IMXIcon } from '@igniteui/material-icons-extended';
+import { IgxIconService } from './icon.service';
+
+/**
+ * Register filtering SVG icons
+ * @param iconService
+ */
+export function registerFilteringSVGIcons(iconService: IgxIconService) {
+    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
+    ];
+
+    filteringIcons.forEach(icon => {
+        iconService.addSvgIconFromText(icon.name, icon.value, 'imx-icons');
+    });
+}

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

@@ -6,7 +6,6 @@ import {
 } 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 { registerFilteringSVGIcons } from '../icon/filtering-icons';
 
 const DEFAULT_PIPE_DATE_FORMAT = 'mediumDate';
 const DEFAULT_PIPE_TIME_FORMAT = 'mediumTime';
@@ -158,7 +158,7 @@ export class IgxQueryBuilderComponent implements AfterViewInit, OnDestroy {
     /**
     * Returns the expression tree.
     */
-     public get expressionTree(): IExpressionTree {
+    public get expressionTree(): IExpressionTree {
         return this._expressionTree;
     }
 
@@ -651,8 +651,8 @@ export class IgxQueryBuilderComponent implements AfterViewInit, OnDestroy {
 
         if (!this.selectedField) {
             this.fieldSelect.input.nativeElement.focus();
-            } else if (this.selectedField.filters.condition(this.selectedCondition).isUnary) {
-                this.conditionSelect.input.nativeElement.focus();
+        } else if (this.selectedField.filters.condition(this.selectedCondition).isUnary) {
+            this.conditionSelect.input.nativeElement.focus();
         } else {
             const input = this.searchValueInput?.nativeElement || this.picker?.getEditElement();
             input.focus();
@@ -1201,11 +1201,6 @@ export class IgxQueryBuilderComponent implements AfterViewInit, OnDestroy {
     }
 
     private registerSVGIcons(): void {
-        const editorIcons = editor as any[];
-
-        editorIcons.forEach((icon) => {
-            this.iconService.addSvgIconFromText(icon.name, icon.value, 'imx-icons');
-        });
+        registerFilteringSVGIcons(this.iconService);
     }
 }
-