edit icon should be independent from editable

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)]="showEditIcon">Show Edit Icon</mat-checkbox>
       <mat-checkbox [(ngModel)]="disabledInteractive">Disabled Interactive</mat-checkbox>
 
       <h4>Input is last child of chip grid</h4>
@@ -172,9 +173,11 @@ <h4>Input is last child of chip grid</h4>
               [editable]="editable"
               (removed)="remove(person)"
               (edited)="edit(person, $event)">
-              <button matChipEdit aria-label="Edit contributor">
-                <mat-icon>edit</mat-icon>
-              </button>
+              @if (showEditIcon) {
+                <button matChipEdit aria-label="Edit contributor">
+                  <mat-icon>edit</mat-icon>
+                </button>
+              }
               {{person.name}}
               <button matChipRemove aria-label="Remove contributor">
                 <mat-icon>close</mat-icon>

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

@@ -52,6 +52,7 @@ export class ChipsDemo {
   listboxesWithAvatar = false;
   disableInputs = false;
   editable = false;
+  showEditIcon = false;
   disabledInteractive = false;
   message = '';
 

src/material/chips/chip-row.ts

@@ -148,11 +148,9 @@ export class MatChipRow extends MatChip implements AfterViewInit {
   }
 
   override _edit(): void {
-    if (!this.disabled && this.editable) {
-      // markForCheck necessary for edit input to be rendered
-      this._changeDetectorRef.markForCheck();
-      this._startEditing();
-    }
+    // markForCheck necessary for edit input to be rendered
+    this._changeDetectorRef.markForCheck();
+    this._startEditing();
   }
 
   private _startEditing(event?: Event) {