docs(material/chips): add chips avatar sample (#24449)

* docs(material/chips): add chips avatar sample

resolves #22905

* docs(material/chips): the ending > tag markers and add description

Change the ending > tag markers to be on the same line as their opening and add more description about chips avatar example

* docs(material/chips): change image alt

change image alts from "shiba1 image" to "Photo of a Shiba Inu"

(cherry picked from commit 29b0a61)

Author: AlirezaEbrahimkhani

src/components-examples/material/chips/chips-avatar/chips-avatar-example.css

@@ -0,0 +1,20 @@
+<mat-chip-list aria-label="Dog selection">
+  <mat-chip>
+    <mat-chip-avatar>
+        <img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="Photo of a Shiba Inu"/>
+    </mat-chip-avatar>
+    Dog one
+  </mat-chip>
+  <mat-chip color="primary">
+    <mat-chip-avatar>
+        <img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="Photo of a Shiba Inu"/>
+    </mat-chip-avatar>
+    Dog two
+  </mat-chip>
+  <mat-chip color="accent">
+    <mat-chip-avatar>
+        <img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="Photo of a Shiba Inu"/>
+    </mat-chip-avatar>
+    Dog three
+  </mat-chip>
+</mat-chip-list>

src/components-examples/material/chips/chips-avatar/chips-avatar-example.html

@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Chips avatar
+ * @description An avatar inside a chip
+ */
+@Component({
+  selector: 'chips-avatar-example',
+  templateUrl: 'chips-avatar-example.html',
+  styleUrls: ['chips-avatar-example.css'],
+})
+export class ChipsAvatarExample {}

src/components-examples/material/chips/chips-avatar/chips-avatar-example.ts

@@ -13,6 +13,7 @@ import {ChipsOverviewExample} from './chips-overview/chips-overview-example';
 import {ChipsStackedExample} from './chips-stacked/chips-stacked-example';
 import {ChipsHarnessExample} from './chips-harness/chips-harness-example';
 import {ChipsFormControlExample} from './chips-form-control/chips-form-control-example';
+import {ChipsAvatarExample} from './chips-avatar/chips-avatar-example';
 import {MatButtonModule} from '@angular/material/button';
 
 export {
@@ -23,6 +24,7 @@ export {
   ChipsStackedExample,
   ChipsHarnessExample,
   ChipsFormControlExample,
+  ChipsAvatarExample,
 };
 
 const EXAMPLES = [
@@ -33,6 +35,7 @@ const EXAMPLES = [
   ChipsStackedExample,
   ChipsHarnessExample,
   ChipsFormControlExample,
+  ChipsAvatarExample,
 ];
 
 @NgModule({