feat(grid): add icon on chips

Author: CalinaCristian

projects/angular/components/ui-suggest/src/ui-suggest.component.html

@@ -102,6 +102,14 @@
                           [matTooltip]="intl.translateLabel(option.text)"
                           (removed)="deselectItem(option)"
                           class="chip-selectable">
+                    <mat-icon *ngIf="!!option?.icon?.svgIcon"
+                              [svgIcon]="option!.icon!.svgIcon!"
+                              class="chip-selectable-icon">
+                    </mat-icon>
+                    <mat-icon *ngIf="!!option?.icon?.matIcon"
+                              class="chip-selectable-icon">
+                        {{option?.icon?.matIcon}}
+                    </mat-icon>
                     <span>
                         {{ intl.translateLabel(option.text) }}
                     </span>

projects/angular/components/ui-suggest/src/ui-suggest.component.scss

@@ -205,6 +205,10 @@ $componentName: "ui-suggest";
     .mat-chip {
         max-width: calc(100% - #{$chips-container-padding * 2});
 
+        .chip-selectable-icon {
+            padding-right: $chips-container-padding;
+        }
+
         span {
             @extend %ellipse;
         }

projects/angular/components/ui-suggest/src/ui-suggest.component.spec.ts

@@ -1076,6 +1076,26 @@ const sharedSpecifications = (
             component.defaultValue = undefined;
         });
 
+        it('should display icon in value if passed', fakeAsync(() => {
+            const suggestValue = {
+                id: '1',
+                text: '1',
+                icon: {
+                    matIcon: 'close',
+                },
+            };
+
+            component.items = [suggestValue];
+            component.value = [suggestValue];
+
+            fixture.detectChanges();
+            tick();
+
+            expect(fixture.debugElement.query(By.css('.chip-selectable-icon'))).toBeTruthy();
+
+            discardPeriodicTasks();
+        }));
+
         describe('a11y', () => {
             a11y.suite((runOptions) => {
                 a11y.it('should have no violations', async () => {