Merge pull request #7736 from IgniteUI/skrastev/grid-icons

ChronosSF · web-flow · commit a19d145745b8 · 2020-07-03T16:18:57.000+03:00
Implementation of grid icon service and separate icons per feature.
diff --git a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-actions-base.directive.ts b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-actions-base.directive.ts
@@ -1,12 +1,13 @@
 import { Directive, Inject } from '@angular/core';
 import { IgxActionStripComponent } from '../action-strip.component';
 import { IgxRowDirective } from '../../grids/public_api';
+import { IgxGridIconService } from '../../grids/common/grid-icon.service';
 
 @Directive({
     selector: '[igxGridActionsBase]'
 })
 export class IgxGridActionsBaseDirective {
-    constructor(@Inject(IgxActionStripComponent) protected strip: IgxActionStripComponent) { }
+    constructor(@Inject(IgxActionStripComponent) protected strip: IgxActionStripComponent, protected iconService: IgxGridIconService) { }
 
     /**
      * Getter to be used in template
diff --git a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions-icons.ts b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions-icons.ts
@@ -0,0 +1,16 @@
+/* tslint:disable */
+export const PINNING_ACTIONS_ICONS_FONT_SET = 'pinning-actions-icons';
+export const PINNING_ACTIONS_ICONS = [
+    {
+        name: 'jump_up',
+        value: `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M6 8l4 4H7c0 3.31 2.69 6 6 6 1.01 0 1.97-.25 2.8-.7l1.46 1.46A7.93 7.93 0 0113 20c-4.42 0-8-3.58-8-8H2l4-4zm15-5v2H5V3h16z"/>
+        </svg>`
+    },
+    {
+        name: 'jump_down',
+        value: `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M21 19v2H5v-2h16zM13 4c1.57 0 3.03.46 4.26 1.24L15.8 6.7A5.87 5.87 0 0013 6c-3.31 0-6 2.69-6 6h3l-4 4-4-4h3c0-4.42 3.58-8 8-8z"/>
+        </svg>`
+    }
+];
diff --git a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.html b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.html
@@ -1,14 +1,14 @@
 <ng-container *ngIf="isRowContext">
     <button *ngIf="inPinnedArea && pinnedTop" igxRipple igxButton="icon" (click)="scrollToRow($event)">
-        <igx-icon fontSet="filtering-icons" name="jump_down"></igx-icon>
+        <igx-icon fontSet="pinning-actions-icons" name="jump_down"></igx-icon>
     </button>
     <button *ngIf="inPinnedArea && !pinnedTop" igxRipple igxButton="icon" (click)="scrollToRow($event)">
-        <igx-icon fontSet="filtering-icons" name="jump_up"></igx-icon>
+        <igx-icon fontSet="pinning-actions-icons" name="jump_up"></igx-icon>
     </button>
     <button *ngIf="!pinned" igxRipple igxButton="icon" (click)="pin($event)">
-        <igx-icon fontSet="filtering-icons" name="pin"></igx-icon>
+        <igx-icon fontSet="pinning-icons" name="pin"></igx-icon>
     </button>
     <button *ngIf="pinned" igxRipple igxButton="icon" (click)="unpin($event)">
-        <igx-icon fontSet="filtering-icons" name="unpin"></igx-icon>
+        <igx-icon fontSet="pinning-icons" name="unpin"></igx-icon>
     </button>
 </ng-container>
diff --git a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.ts b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.ts
@@ -1,6 +1,8 @@
 import { Component, HostBinding } from '@angular/core';
 import { IgxGridActionsBaseDirective } from './grid-actions-base.directive';
-
+import { GridIconsFeature } from '../../grids/common/enums';
+import { PINNING_ACTIONS_ICONS_FONT_SET, PINNING_ACTIONS_ICONS, } from './grid-pinning-actions-icons';
+import { PINNING_ICONS_FONT_SET, PINNING_ICONS } from '../../grids/pinning/pinning-icons';
 @Component({
     selector: 'igx-grid-pinning-actions',
     templateUrl: 'grid-pinning-actions.component.html',
@@ -29,7 +31,7 @@ export class IgxGridPinningActionsComponent extends IgxGridActionsBaseDirective
         }
         const context = this.strip.context;
         if (context && !this.iconsRendered) {
-            this.renderIcons();
+            this.registerSVGIcons();
             this.iconsRendered = true;
         }
         return context && context.pinned;
@@ -110,14 +112,15 @@ export class IgxGridPinningActionsComponent extends IgxGridActionsBaseDirective
         this.strip.hide();
     }
 
-    private renderIcons(): void {
+    private registerSVGIcons(): void {
         if (!this.isRow(this.strip.context)) {
             return;
         }
         const context = this.strip.context;
         const grid = context.grid;
         if (grid) {
-            grid.filteringService.registerSVGIcons();
+            this.iconService.registerSVGIcons(GridIconsFeature.RowPinning, PINNING_ICONS, PINNING_ICONS_FONT_SET);
+            this.iconService.registerSVGIcons(GridIconsFeature.RowPinningActions, PINNING_ACTIONS_ICONS, PINNING_ACTIONS_ICONS_FONT_SET);
         }
     }
 }
diff --git a/projects/igniteui-angular/src/lib/grids/common/enums.ts b/projects/igniteui-angular/src/lib/grids/common/enums.ts
@@ -47,3 +47,9 @@ export enum GridPagingMode {
     local,
     remote
 }
+
+export enum GridIconsFeature {
+    Filtering,
+    RowPinning,
+    RowPinningActions
+}
diff --git a/projects/igniteui-angular/src/lib/grids/common/grid-icon.service.ts b/projects/igniteui-angular/src/lib/grids/common/grid-icon.service.ts
@@ -0,0 +1,35 @@
+import { Injectable } from '@angular/core';
+import { IgxIconService } from '../../icon/icon.service';
+import { GridIconsFeature } from './enums';
+import { GridSVGIcon } from './grid.interface';
+
+/**
+ * @hidden
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class IgxGridIconService {
+
+    private iconsMap = new Map<GridIconsFeature, GridSVGIcon[]>();
+    private fontSetMap = new Map<GridIconsFeature, string>();
+    private registeredIcons = new Map<GridIconsFeature, boolean>();
+
+    constructor(private iconService: IgxIconService) { }
+
+    /**
+     * Register filtering SVG icons in the icon service.
+     */
+    public registerSVGIcons(feature: GridIconsFeature, icons: GridSVGIcon[], fontSet: string): void {
+        if (!this.registeredIcons.has(feature) || !this.registeredIcons.get(feature)) {
+            for (const icon of icons) {
+                if (!this.iconService.isSvgIconCached(icon.name, fontSet)) {
+                    this.iconService.addSvgIconFromText(icon.name, icon.value, fontSet);
+                }
+            }
+            this.iconsMap.set(feature, icons);
+            this.fontSetMap.set(feature, fontSet);
+            this.registeredIcons.set(feature, true);
+        }
+    }
+}
diff --git a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts
@@ -67,3 +67,8 @@ export interface GridType extends IGridDataBindable {
     isDetailRecord(rec: any): boolean;
     isGroupByRecord(rec: any): boolean;
 }
+
+export interface GridSVGIcon {
+    name: string;
+    value: string;
+}
diff --git a/projects/igniteui-angular/src/lib/grids/common/shared.module.ts b/projects/igniteui-angular/src/lib/grids/common/shared.module.ts
@@ -21,6 +21,7 @@ import { IgxProgressBarModule } from '../../progressbar/progressbar.component';
 import { IgxSelectModule } from '../../select/select.module';
 import { IgxDropDownModule } from '../../drop-down/public_api';
 import { IgxGridStateModule } from '../state.directive';
+import { IgxGridIconService } from './grid-icon.service';
 
 
 @NgModule({
@@ -71,6 +72,9 @@ import { IgxGridStateModule } from '../state.directive';
         IgxButtonGroupModule,
         IgxProgressBarModule,
         IgxSelectModule
+    ],
+    providers: [
+        IgxGridIconService
     ]
 })
 export class IgxGridSharedModules {}
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.html
@@ -23,15 +23,15 @@
         tabindex="0"
         *ngIf="!column.pinned">
         <span>{{ grid.resourceStrings.igx_grid_excel_pin }}</span>
-        <igx-icon fontSet="filtering-icons" name="pin"></igx-icon>
+        <igx-icon fontSet="pinning-icons" name="pin"></igx-icon>
     </div>
 
     <div class="igx-excel-filter__actions-unpin"
         (click)="onPin()"
         tabindex="0"
         *ngIf="column.pinned">
         <span>{{ grid.resourceStrings.igx_grid_excel_unpin }}</span>
-        <igx-icon fontSet="filtering-icons" name="unpin"></igx-icon>
+        <igx-icon fontSet="pinning-icons" name="unpin"></igx-icon>
     </div>
 </ng-template>
 
@@ -79,14 +79,14 @@ <h4>{{ column.header || column.field }}</h4>
                 (click)="onPin()"
                 [disabled]="!isColumnPinnable"
                 tabindex="0">
-                <igx-icon fontSet="filtering-icons" name="pin"></igx-icon>
+                <igx-icon fontSet="pinning-icons" name="pin"></igx-icon>
             </button>
             <button *ngIf="!column.disablePinning && column.pinned"
                 igxButton="icon"
                 [displayDensity]="grid.displayDensity"
                 (click)="onPin()"
                 tabindex="0">
-                <igx-icon fontSet="filtering-icons" name="unpin"></igx-icon>
+                <igx-icon fontSet="pinning-icons" name="unpin"></igx-icon>
             </button>
             <button *ngIf="!column.disableHiding"
                 igxButton="icon"
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-icons.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-icons.ts
@@ -1,5 +1,6 @@
 /* tslint:disable */
-export default [
+export const FILTERING_ICONS_FONT_SET = 'filtering-icons';
+export const FILTERING_ICONS = [
     {
         name: 'add_filter',
         value: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
@@ -206,19 +207,6 @@ export default [
         <path d="M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14z"/>
       </svg>`
     },
-    {
-        name: 'pin',
-        value: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-        <path d="M15.18 2.25l7.07 7.07-2.83-.01-3.54 3.55.01 4.24-3.53-3.54-5.66 5.66H5.28V17.8l5.66-5.66L7.4 8.61l4.24.01 3.55-3.54-.01-2.83z"/>
-      </svg>`
-    },
-    {
-        name: 'unpin',
-        value: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-        <path fill="none" d="M0 0h24v25H0V0z"/>
-        <path d="M11.84 14.08L6.7 19.22H5.28V17.8l5.14-5.14L2 4.26 3.29 3l18 18L20 22.21zm4-.49l-5-5h.73l3.55-3.54v-2.8l7.07 7.07h-2.77l-3.54 3.54z" />
-      </svg>`
-    },
     {
         name: 'ungroup',
         value: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
@@ -228,17 +216,5 @@ export default [
           <rect x="7.5" y="7.5" width="3.75" height="3.75"/>
           <rect x="12.75" y="7.5" width="3.75" height="3.75"/>
         </svg>`
-    },
-    {
-        name: 'jump_up',
-        value: `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <path d="M6 8l4 4H7c0 3.31 2.69 6 6 6 1.01 0 1.97-.25 2.8-.7l1.46 1.46A7.93 7.93 0 0113 20c-4.42 0-8-3.58-8-8H2l4-4zm15-5v2H5V3h16z"/>
-        </svg>`
-    },
-    {
-        name: 'jump_down',
-        value: `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <path d="M21 19v2H5v-2h16zM13 4c1.57 0 3.03.46 4.26 1.24L15.8 6.7A5.87 5.87 0 0013 6c-3.31 0-6 2.69-6 6h3l-4 4-4-4h3c0-4.42 3.58-8 8-8z"/>
-        </svg>`
     }
 ];
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts
@@ -1,8 +1,6 @@
 import { Injectable, OnDestroy, NgModuleRef } from '@angular/core';
-import { IgxIconService } from '../../icon/icon.service';
 import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
 import { IgxGridBaseDirective } from '../grid-base.directive';
-import icons from './svgIcons';
 import { IFilteringExpression, FilteringLogic } from '../../data-operations/filtering-expression.interface';
 import { Subject } from 'rxjs';
 import { takeUntil, filter } from 'rxjs/operators';
@@ -19,8 +17,10 @@ import { useAnimation } from '@angular/animations';
 import { fadeIn, fadeOut } from '../../animations/main';
 import { ExcelStylePositionStrategy } from './excel-style/excel-style-position-strategy';
 import { AbsoluteScrollStrategy } from '../../services/overlay/scroll/absolute-scroll-strategy';
-
-const FILTERING_ICONS_FONT_SET = 'filtering-icons';
+import { IgxGridIconService } from '../common/grid-icon.service';
+import { GridIconsFeature } from '../common/enums';
+import { FILTERING_ICONS_FONT_SET, FILTERING_ICONS} from './grid-filtering-icons';
+import { PINNING_ICONS_FONT_SET, PINNING_ICONS} from '../pinning/pinning-icons';
 
 /**
  * @hidden
@@ -60,7 +60,7 @@ export class IgxFilteringService implements OnDestroy {
     grid: IgxGridBaseDirective;
 
     constructor(private gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>, private _moduleRef: NgModuleRef<any>,
-        private iconService: IgxIconService,  private _overlayService: IgxOverlayService) {}
+        private iconService: IgxGridIconService,  private _overlayService: IgxOverlayService) {}
 
     ngOnDestroy(): void {
         this.destroy$.next(true);
@@ -255,14 +255,8 @@ export class IgxFilteringService implements OnDestroy {
      * Register filtering SVG icons in the icon service.
      */
     public registerSVGIcons(): void {
-        if (!this._filterIconsRegistered) {
-            for (const icon of icons) {
-                if (!this.iconService.isSvgIconCached(icon.name, FILTERING_ICONS_FONT_SET)) {
-                    this.iconService.addSvgIconFromText(icon.name, icon.value, FILTERING_ICONS_FONT_SET);
-                }
-            }
-            this._filterIconsRegistered = true;
-        }
+        this.iconService.registerSVGIcons(GridIconsFeature.Filtering, FILTERING_ICONS, FILTERING_ICONS_FONT_SET);
+        this.iconService.registerSVGIcons(GridIconsFeature.RowPinning, PINNING_ICONS, PINNING_ICONS_FONT_SET);
     }
 
     /**
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts
@@ -36,7 +36,6 @@ import { IgxTransactionService } from '../../services/public_api';
 import { IgxForOfSyncService, IgxForOfScrollSyncService } from '../../directives/for-of/for_of.sync.service';
 import { GridType } from '../common/grid.interface';
 import { IgxRowIslandAPIService } from './row-island-api.service';
-import { DeprecateProperty } from '../../core/deprecateDecorators';
 
 let NEXT_ID = 0;
 
diff --git a/projects/igniteui-angular/src/lib/grids/pinning/pinning-icons.ts b/projects/igniteui-angular/src/lib/grids/pinning/pinning-icons.ts
@@ -0,0 +1,17 @@
+/* tslint:disable */
+export const PINNING_ICONS_FONT_SET = 'pinning-icons'
+export const PINNING_ICONS = [
+    {
+        name: 'pin',
+        value: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path d="M15.18 2.25l7.07 7.07-2.83-.01-3.54 3.55.01 4.24-3.53-3.54-5.66 5.66H5.28V17.8l5.66-5.66L7.4 8.61l4.24.01 3.55-3.54-.01-2.83z"/>
+      </svg>`
+    },
+    {
+        name: 'unpin',
+        value: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path fill="none" d="M0 0h24v25H0V0z"/>
+        <path d="M11.84 14.08L6.7 19.22H5.28V17.8l5.14-5.14L2 4.26 3.29 3l18 18L20 22.21zm4-.49l-5-5h.73l3.55-3.54v-2.8l7.07 7.07h-2.77l-3.54 3.54z" />
+      </svg>`
+    }
+];
diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.html b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.html
@@ -45,8 +45,8 @@
         <button igxButton="outlined" [displayDensity]="grid.displayDensity" #columnPinningButton name="btnColumnPinning" igxRipple
             (click)="toggleColumnPinningUI()">
             <div  class="igx-grid-toolbar__button-space">
-                <igx-icon *ngIf="pinnedColumnsCount > 0" fontSet="filtering-icons" name="pin"></igx-icon>
-                <igx-icon *ngIf="pinnedColumnsCount === 0" fontSet="filtering-icons" name="unpin"></igx-icon>
+                <igx-icon *ngIf="pinnedColumnsCount > 0" fontSet="pinning-icons" name="pin"></igx-icon>
+                <igx-icon *ngIf="pinnedColumnsCount === 0" fontSet="pinning-icons" name="unpin"></igx-icon>
                 <span>{{ pinnedColumnsCount }}</span>
                 <span>{{ grid.pinnedColumnsText }}</span>
                 <span></span>
diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts
@@ -29,10 +29,9 @@ import { IgxColumnPinningComponent } from '../pinning/column-pinning.component';
 import { OverlaySettings, PositionSettings, HorizontalAlignment, VerticalAlignment } from '../../services/overlay/utilities';
 import { ConnectedPositioningStrategy } from '../../services/overlay/position';
 import { GridType } from '../common/grid.interface';
-import { IgxIconService } from '../../icon/icon.service';
-import icons from './../filtering/svgIcons';
-
-const FILTERING_ICONS_FONT_SET = 'filtering-icons';
+import { IgxGridIconService } from '../common/grid-icon.service';
+import { PINNING_ICONS_FONT_SET, PINNING_ICONS} from '../pinning/pinning-icons';
+import { GridIconsFeature } from '../common/enums';
 
 /**
  * This class encapsulates the Toolbar's logic and is internally used by
@@ -235,7 +234,7 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements After
         @Optional() public excelExporter: IgxExcelExporterService,
         @Optional() public csvExporter: IgxCsvExporterService,
         @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions,
-        private iconService: IgxIconService) {
+        private iconService: IgxGridIconService) {
             super(_displayDensityOptions);
     }
 
@@ -403,11 +402,6 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements After
      * @internal
      */
     ngAfterViewInit() {
-        const pinnedIcons = icons.filter(icon => icon.name === 'pin' || icon.name === 'unpin');
-        for (const icon of pinnedIcons) {
-            if (!this.iconService.isSvgIconCached(icon.name, FILTERING_ICONS_FONT_SET)) {
-                this.iconService.addSvgIconFromText(icon.name, icon.value, FILTERING_ICONS_FONT_SET);
-            }
-        }
+        this.iconService.registerSVGIcons(GridIconsFeature.RowPinning, PINNING_ICONS, PINNING_ICONS_FONT_SET);
     }
 }
diff --git a/src/app/grid-row-pinning/grid-row-pinning.sample.html b/src/app/grid-row-pinning/grid-row-pinning.sample.html
@@ -35,7 +35,7 @@
                 <igx-column width='150px' [filterable]='false'>
                     <ng-template igxCell let-cell="cell" let-val>
                         <igx-icon class="pin-icon" (mouseup)="togglePining(cell.row, $event)"
-                        fontSet="filtering-icons" name="{{cell.row.pinned ? 'unpin' : 'pin'}}">
+                        fontSet="pinning-icons" name="{{cell.row.pinned ? 'unpin' : 'pin'}}">
                         </igx-icon>
                     </ng-template>
                 </igx-column>
diff --git a/src/app/grid-row-pinning/grid-row-pinning.sample.ts b/src/app/grid-row-pinning/grid-row-pinning.sample.ts

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,8 @@`
`1`	`1`	`import { Component, HostBinding } from '@angular/core';`
`2`	`2`	`import { IgxGridActionsBaseDirective } from './grid-actions-base.directive';`
`3`		`-`
	`3`	`+import { GridIconsFeature } from '../../grids/common/enums';`
	`4`	`+import { PINNING_ACTIONS_ICONS_FONT_SET, PINNING_ACTIONS_ICONS, } from './grid-pinning-actions-icons';`
	`5`	`+import { PINNING_ICONS_FONT_SET, PINNING_ICONS } from '../../grids/pinning/pinning-icons';`
`4`	`6`	`@Component({`
`5`	`7`	`selector: 'igx-grid-pinning-actions',`
`6`	`8`	`templateUrl: 'grid-pinning-actions.component.html',`
`@@ -29,7 +31,7 @@ export class IgxGridPinningActionsComponent extends IgxGridActionsBaseDirective`
`29`	`31`	`}`
`30`	`32`	`const context = this.strip.context;`
`31`	`33`	`if (context && !this.iconsRendered) {`
`32`		`- this.renderIcons();`
	`34`	`+ this.registerSVGIcons();`
`33`	`35`	`this.iconsRendered = true;`
`34`	`36`	`}`
`35`	`37`	`return context && context.pinned;`
`@@ -110,14 +112,15 @@ export class IgxGridPinningActionsComponent extends IgxGridActionsBaseDirective`
`110`	`112`	`this.strip.hide();`
`111`	`113`	`}`
`112`	`114`
`113`		`- private renderIcons(): void {`
	`115`	`+ private registerSVGIcons(): void {`
`114`	`116`	`if (!this.isRow(this.strip.context)) {`
`115`	`117`	`return;`
`116`	`118`	`}`
`117`	`119`	`const context = this.strip.context;`
`118`	`120`	`const grid = context.grid;`
`119`	`121`	`if (grid) {`
`120`		`- grid.filteringService.registerSVGIcons();`
	`122`	`+ this.iconService.registerSVGIcons(GridIconsFeature.RowPinning, PINNING_ICONS, PINNING_ICONS_FONT_SET);`
	`123`	`+ this.iconService.registerSVGIcons(GridIconsFeature.RowPinningActions, PINNING_ACTIONS_ICONS, PINNING_ACTIONS_ICONS_FONT_SET);`
`121`	`124`	`}`
`122`	`125`	`}`
`123`	`126`	`}`
Original file line number	Diff line number	Diff line change
`@@ -67,3 +67,8 @@ export interface GridType extends IGridDataBindable {`
`67`	`67`	`isDetailRecord(rec: any): boolean;`
`68`	`68`	`isGroupByRecord(rec: any): boolean;`
`69`	`69`	`}`
	`70`	`+`
	`71`	`+export interface GridSVGIcon {`
	`72`	`+ name: string;`
	`73`	`+ value: string;`
	`74`	`+}`