fix(toolbar): Update pinning icon #7043

Author: dkamburov

projects/igniteui-angular/src/lib/grids/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">lock</igx-icon>
-                <igx-icon *ngIf="pinnedColumnsCount === 0">lock_open</igx-icon>
+                <igx-icon *ngIf="pinnedColumnsCount > 0" fontSet="filtering-icons" name="pin"></igx-icon>
+                <igx-icon *ngIf="pinnedColumnsCount === 0" fontSet="filtering-icons" name="unpin"></igx-icon>
                 <span>{{ pinnedColumnsCount }}</span>
                 <span>{{ grid.pinnedColumnsText }}</span>
                 <span></span>

projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.html

@@ -6,7 +6,8 @@ import {
     Optional,
     ViewChild,
     Inject,
-    TemplateRef
+    TemplateRef,
+    AfterViewInit
 } from '@angular/core';
 
 import { IDisplayDensityOptions, DisplayDensityToken, DisplayDensityBase } from '../../core/displayDensity';
@@ -28,6 +29,10 @@ 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';
 
 /**
  * This class encapsulates the Toolbar's logic and is internally used by
@@ -37,7 +42,7 @@ import { GridType } from '../common/grid.interface';
     selector: 'igx-grid-toolbar',
     templateUrl: './grid-toolbar.component.html'
 })
-export class IgxGridToolbarComponent extends DisplayDensityBase {
+export class IgxGridToolbarComponent extends DisplayDensityBase implements AfterViewInit {
     /**
      * @hidden
      */
@@ -229,7 +234,8 @@ export class IgxGridToolbarComponent extends DisplayDensityBase {
         public cdr: ChangeDetectorRef,
         @Optional() public excelExporter: IgxExcelExporterService,
         @Optional() public csvExporter: IgxCsvExporterService,
-        @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
+        @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions,
+        private iconService: IgxIconService) {
             super(_displayDensityOptions);
     }
 
@@ -391,4 +397,17 @@ export class IgxGridToolbarComponent extends DisplayDensityBase {
             return null;
         }
     }
+
+    /**
+     * @hidden
+     * @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);
+            }
+        }
+    }
 }

projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts

@@ -1,5 +1,5 @@
 <div class="wrapper">
-    <app-page-header title="Grid Column Pinning">
+    <app-page-header title="Grid Row Pinning">
         Allows rows to be pinned to the beginning/end of the grid.
     </app-page-header>
     <button (click)="grid1.addRow({'ID': 'TEST', 'CompanyName': 'Test'})">Add Row</button>
@@ -19,8 +19,8 @@
                 [height]="'500px'" [rowSelectable]="false">
                 <igx-column width='70px' [filterable]='false'>
                     <ng-template igxCell let-cell="cell" let-val>
-                        <igx-icon class="pin-icon" (mousedown)="togglePining(cell.row, $event)">
-                            {{cell.row.pinned ? 'lock' : 'lock_open'}}
+                        <igx-icon class="pin-icon" (mousedown)="togglePining(cell.row, $event)"
+                        fontSet="filtering-icons" name="{{cell.row.pinned ? 'unpin' : 'pin'}}">
                         </igx-icon>
                     </ng-template>
                 </igx-column>

src/app/grid-row-pinning/grid-row-pinning.sample.html

@@ -10,6 +10,10 @@ import {
     IgxExcelExporterOptions
 } from 'igniteui-angular';
 import { IPinningConfig } from 'projects/igniteui-angular/src/lib/grids/common/grid.interface';
+import { IgxIconService } from 'projects/igniteui-angular/src/lib/icon/icon.service';
+import icons from 'projects/igniteui-angular/src/lib/grids/filtering/svgIcons';
+
+const FILTERING_ICONS_FONT_SET = 'filtering-icons';
 
 @Component({
     providers: [{ provide: IgxGridTransaction, useClass: IgxTransactionService }],
@@ -39,7 +43,7 @@ export class GridRowPinningSampleComponent implements OnInit {
 
     @ViewChild(IgxGridStateDirective, { static: true }) public state: IgxGridStateDirective;
 
-    constructor(private excelExportService: IgxExcelExporterService) {
+    constructor(private excelExportService: IgxExcelExporterService, private iconService: IgxIconService) {
     }
 
     onRowChange() {
@@ -108,6 +112,15 @@ export class GridRowPinningSampleComponent implements OnInit {
         // tslint:enable:max-line-length
     }
 
+    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);
+            }
+        }
+    }
+
     togglePinRow(index) {
         const rec = this.data[index];
         this.grid1.isRecordPinned(rec) ?