fix(material/chips): avoid clipping icon avatars

src/material/chips/BUILD.bazel

@@ -127,6 +127,7 @@ ng_project(
         "//src/cdk/testing/private",
         "//src/material/core",
         "//src/material/form-field",
+        "//src/material/icon",
         "//src/material/input",
     ],
 )

src/material/chips/chip.scss

@@ -446,6 +446,11 @@ $fallbacks: m3-chip.get-tokens();
     font-size: token-utils.slot(chip-with-icon-icon-size, $fallbacks);
   }
 
+  // `mat-icon` clips its content which, combined with the avatar shape, cuts off its corners.
+  .mat-mdc-standard-chip &.mat-icon {
+    overflow: visible;
+  }
+
   .mdc-evolution-chip--selected & {
     opacity: 0;
   }

src/material/chips/chip.spec.ts

@@ -2,6 +2,7 @@ import {provideFakeDirectionality} from '@angular/cdk/testing/private';
 import {Component, DebugElement, ViewChild, ChangeDetectionStrategy} from '@angular/core';
 import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
+import {MatIconModule} from '../icon';
 import {MatChip, MatChipEvent, MatChipSet, MatChipsModule} from './index';
 
 describe('MatChip', () => {
@@ -141,6 +142,14 @@ describe('MatChip', () => {
       expect(chipInstance.value).toBeNull();
     });
   });
+
+  it('should not clip the corners of icon avatars', () => {
+    fixture = TestBed.createComponent(ChipWithIconAvatar);
+    fixture.detectChanges();
+
+    const avatar = fixture.nativeElement.querySelector('.mat-mdc-chip-avatar');
+    expect(getComputedStyle(avatar).overflow).toBe('visible');
+  });
 });
 
 @Component({
@@ -196,3 +205,14 @@ class BasicChipWithStaticTabindex {}
 class BasicChipWithBoundTabindex {
   tabindex = 12;
 }
+
+@Component({
+  template: `
+    <mat-chip-set>
+      <mat-chip><mat-icon matChipAvatar>event</mat-icon>Event</mat-chip>
+    </mat-chip-set>
+  `,
+  imports: [MatChipsModule, MatIconModule],
+  changeDetection: ChangeDetectionStrategy.Eager,
+})
+class ChipWithIconAvatar {}

src/material/chips/chips.md

@@ -78,10 +78,19 @@ You can add icons to chips to identify entities (like individuals) and provide a
 
 You can add two additional icons to an individual chip. A chip has two slots to display icons using content projection. All variants of chips support adding icons including `<mat-chip>`, `<mat-chip-option>`, and `<mat-chip-row>`.
 
-A chip has a front slot for adding an avatar image. To add an avatar, nest an element with `matChipAvatar` attribute inside of `<mat-chip>`.
+A chip has a front slot for adding an avatar image or a leading icon. To use it, nest an element with the `matChipAvatar` attribute inside of the chip. Content without this attribute is rendered as part of the chip's text.
 
 <!-- example(chips-avatar) -->
 
+Icons can be added to the front slot the same way.
+
+```html
+<mat-chip>
+  <mat-icon matChipAvatar>event</mat-icon>
+  Meeting
+</mat-chip>
+```
+
 You can add an additional icon to the back slot by nesting an element with either the `matChipTrailingIcon` or `matChipRemove` attribute.
 
 #### Remove Button