add avatar to demo input chips

Author: adolgachev

src/dev-app/chips/chips-demo.html

@@ -160,6 +160,7 @@ <h4>Multi selection</h4>
 
       <mat-checkbox [(ngModel)]="disableInputs">Disabled</mat-checkbox>
       <mat-checkbox [(ngModel)]="editable">Editable</mat-checkbox>
+      <mat-checkbox [(ngModel)]="peopleWithAvatar">Show Avatar</mat-checkbox>
       <mat-checkbox [(ngModel)]="showEditIcon">Show Edit Icon</mat-checkbox>
       <mat-checkbox [(ngModel)]="disabledInteractive">Disabled Interactive</mat-checkbox>
 
@@ -178,6 +179,9 @@ <h4>Input is last child of chip grid</h4>
                   <mat-icon>edit</mat-icon>
                 </button>
               }
+              @if (peopleWithAvatar && person.avatar) {
+                <mat-icon matChipAvatar>{{person.avatar}}</mat-icon>
+              }
               {{person.name}}
               <button matChipRemove aria-label="Remove contributor">
                 <mat-icon>close</mat-icon>

src/dev-app/chips/chips-demo.ts

@@ -20,6 +20,7 @@ import {MatIconModule} from '@angular/material/icon';
 
 export interface Person {
   name: string;
+  avatar?: string;
 }
 
 export interface DemoColor {
@@ -52,6 +53,7 @@ export class ChipsDemo {
   listboxesWithAvatar = false;
   disableInputs = false;
   editable = false;
+  peopleWithAvatar = false;
   showEditIcon = false;
   disabledInteractive = false;
   message = '';
@@ -76,12 +78,12 @@ export class ChipsDemo {
   selectedPeople = null;
 
   people: Person[] = [
-    {name: 'Kara'},
-    {name: 'Jeremy'},
-    {name: 'Topher'},
-    {name: 'Elad'},
-    {name: 'Kristiyan'},
-    {name: 'Paul'},
+    {name: 'Kara', avatar: 'K'},
+    {name: 'Jeremy', avatar: 'J'},
+    {name: 'Topher', avatar: 'T'},
+    {name: 'Elad', avatar: 'E'},
+    {name: 'Kristiyan', avatar: 'K'},
+    {name: 'Paul', avatar: 'P'},
   ];
 
   availableColors: DemoColor[] = [