<mat-chip-set>
  <mat-chip class="sz-medium sh-round">
    Angular 22
  </mat-chip>
</mat-chip-set>

<mat-chip-set>
  <mat-chip class="sz-medium sh-round">
    <img matChipAvatar src="https://material.angular.dev/assets/img/examples/shiba1.jpg" alt="Avatar" />
    Jane Doe
  </mat-chip>
</mat-chip-set>

<mat-chip-set>
  <mat-chip class="sz-medium sh-round">
    Removable Chip
    <button matChipRemove aria-label="Remove chip">
      <mat-icon class="material-symbols-outlined">cancel</mat-icon>
    </button>
  </mat-chip>
</mat-chip-set>

<mat-form-field class="example-chip-list sz-medium" appearance="outline">
  <mat-label>Favorite Fruits</mat-label>
  <mat-chip-grid #chipGrid aria-label="Enter fruits">
    @for (fruit of fruits(); track fruit.name) {
      <mat-chip-row
        class="sz-medium sh-round"
        [editable]="true"
        (edited)="editFruit(fruit, $event)"
        (removed)="removeFruit(fruit)">
        <button matChipEdit [attr.aria-label]="'edit ' + fruit.name">
          <mat-icon class="material-symbols-outlined">edit</mat-icon>
        </button>
        {{fruit.name}}
        <button matChipRemove [attr.aria-label]="'remove ' + fruit.name">
          <mat-icon class="material-symbols-outlined">cancel</mat-icon>
        </button>
      </mat-chip-row>
    }
  </mat-chip-grid>
  <input placeholder="New fruit..." [matChipInputFor]="chipGrid" (matChipInputTokenEnd)="addFruit($event)" />
</mat-form-field>