From a56131a8dba35d056cd51bceb9be798ca145358a Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Thu, 1 Sep 2022 14:16:31 -0400
Subject: [PATCH 1/5] dosc(avatar): add component playgrounds

---
 docs/api/avatar.md                            | 181 ++----------------
 static/usage/avatar/basic/angular.md          |   5 +
 static/usage/avatar/basic/demo.html           |  27 +++
 static/usage/avatar/basic/index.md            |   8 +
 static/usage/avatar/basic/javascript.md       |   5 +
 static/usage/avatar/basic/react.md            |  15 ++
 static/usage/avatar/basic/vue.md              |  16 ++
 static/usage/avatar/chip/angular.md           |   8 +
 static/usage/avatar/chip/demo.html            |  30 +++
 static/usage/avatar/chip/index.md             |   8 +
 static/usage/avatar/chip/javascript.md        |   8 +
 static/usage/avatar/chip/react.md             |  17 ++
 static/usage/avatar/chip/vue.md               |  19 ++
 static/usage/avatar/item/angular.md           |   8 +
 static/usage/avatar/item/demo.html            |  30 +++
 static/usage/avatar/item/index.md             |   8 +
 static/usage/avatar/item/javascript.md        |   8 +
 static/usage/avatar/item/react.md             |  17 ++
 static/usage/avatar/item/vue.md               |  19 ++
 .../avatar/theming/angular/angular-css.md     |   5 +
 .../avatar/theming/angular/angular-html.md    |   5 +
 static/usage/avatar/theming/demo.html         |  32 ++++
 static/usage/avatar/theming/index.md          |  32 ++++
 static/usage/avatar/theming/javascript.md     |  11 ++
 static/usage/avatar/theming/react.md          |  20 ++
 .../usage/avatar/theming/react/react-css.md   |   5 +
 .../usage/avatar/theming/react/react-tsx.md   |  18 ++
 static/usage/avatar/theming/vue.md            |  22 +++
 28 files changed, 419 insertions(+), 168 deletions(-)
 create mode 100644 static/usage/avatar/basic/angular.md
 create mode 100644 static/usage/avatar/basic/demo.html
 create mode 100644 static/usage/avatar/basic/index.md
 create mode 100644 static/usage/avatar/basic/javascript.md
 create mode 100644 static/usage/avatar/basic/react.md
 create mode 100644 static/usage/avatar/basic/vue.md
 create mode 100644 static/usage/avatar/chip/angular.md
 create mode 100644 static/usage/avatar/chip/demo.html
 create mode 100644 static/usage/avatar/chip/index.md
 create mode 100644 static/usage/avatar/chip/javascript.md
 create mode 100644 static/usage/avatar/chip/react.md
 create mode 100644 static/usage/avatar/chip/vue.md
 create mode 100644 static/usage/avatar/item/angular.md
 create mode 100644 static/usage/avatar/item/demo.html
 create mode 100644 static/usage/avatar/item/index.md
 create mode 100644 static/usage/avatar/item/javascript.md
 create mode 100644 static/usage/avatar/item/react.md
 create mode 100644 static/usage/avatar/item/vue.md
 create mode 100644 static/usage/avatar/theming/angular/angular-css.md
 create mode 100644 static/usage/avatar/theming/angular/angular-html.md
 create mode 100644 static/usage/avatar/theming/demo.html
 create mode 100644 static/usage/avatar/theming/index.md
 create mode 100644 static/usage/avatar/theming/javascript.md
 create mode 100644 static/usage/avatar/theming/react.md
 create mode 100644 static/usage/avatar/theming/react/react-css.md
 create mode 100644 static/usage/avatar/theming/react/react-tsx.md
 create mode 100644 static/usage/avatar/theming/vue.md

diff --git a/docs/api/avatar.md b/docs/api/avatar.md
index 86fb904812a..e7a005fa719 100644
--- a/docs/api/avatar.md
+++ b/docs/api/avatar.md
@@ -1,11 +1,6 @@
 ---
 title: "ion-avatar"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/avatar/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/avatar/index.html"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
 
 import Props from '@site/static/auto-generated/avatar/props.md';
 import Events from '@site/static/auto-generated/avatar/events.md';
@@ -20,186 +15,36 @@ import Slots from '@site/static/auto-generated/avatar/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<APITOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
-/>
-
-
-
 Avatars are circular components that usually wrap an image or icon. They can be used to represent a person or an object.
 
 Avatars can be used by themselves or inside of any element. If placed inside of an `ion-chip` or `ion-item`, the avatar will resize to fit the parent component. To position an avatar on the left or right side of an item, set the slot to `start` or `end`, respectively.
 
+## Basic
 
+import Basic from '@site/static/usage/avatar/basic/index.md';
 
+<Basic />
 
-## Usage
+## Chip Avatar
 
-<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'stencil', label: 'Stencil' }, { value: 'vue', label: 'Vue' }]}>
+import Chip from '@site/static/usage/avatar/chip/index.md';
 
-<TabItem value="angular">
+<Chip />
 
-```html
-<ion-avatar>
-  <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-</ion-avatar>
+## Item Avatar
 
-<ion-chip>
-  <ion-avatar>
-    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-  </ion-avatar>
-  <ion-label>Chip Avatar</ion-label>
-</ion-chip>
-
-<ion-item>
-  <ion-avatar slot="start">
-    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-  </ion-avatar>
-  <ion-label>Item Avatar</ion-label>
-</ion-item>
-```
+import Item from '@site/static/usage/avatar/item/index.md';
 
-</TabItem>
+<Item />
 
+## Theming
 
-<TabItem value="javascript">
+import Theming from '@site/static/usage/avatar/theming/index.md';
 
-```html
-<ion-avatar>
-  <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-</ion-avatar>
-
-<ion-chip>
-  <ion-avatar>
-    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-  </ion-avatar>
-  <ion-label>Chip Avatar</ion-label>
-</ion-chip>
-
-<ion-item>
-  <ion-avatar slot="start">
-    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-  </ion-avatar>
-  <ion-label>Item Avatar</ion-label>
-</ion-item>
-```
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonAvatar, IonChip, IonItem, IonLabel, IonContent } from '@ionic/react';
-
-export const AvatarExample: React.FC = () => (
-  <IonContent>
-    <IonAvatar>
-      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
-    </IonAvatar>
-
-    <IonChip>
-      <IonAvatar>
-        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
-      </IonAvatar>
-      <IonLabel>Chip Avatar</IonLabel>
-    </IonChip>
-
-    <IonItem>
-      <IonAvatar slot="start">
-        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
-      </IonAvatar>
-      <IonLabel>Item Avatar</IonLabel>
-    </IonItem>
-  </IonContent>
-);
-```
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'avatar-example',
-  styleUrl: 'avatar-example.css'
-})
-export class AvatarExample {
-  render() {
-    return [
-      <ion-avatar>
-        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
-      </ion-avatar>,
-
-      <ion-chip>
-        <ion-avatar>
-          <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
-        </ion-avatar>
-        <ion-label>Chip Avatar</ion-label>
-      </ion-chip>,
-
-      <ion-item>
-        <ion-avatar slot="start">
-          <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
-        </ion-avatar>
-        <ion-label>Item Avatar</ion-label>
-      </ion-item>
-    ];
-  }
-}
-```
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <ion-avatar>
-    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-  </ion-avatar>
-
-  <ion-chip>
-    <ion-avatar>
-      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-    </ion-avatar>
-    <ion-label>Chip Avatar</ion-label>
-  </ion-chip>
-
-  <ion-item>
-    <ion-avatar slot="start">
-      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-    </ion-avatar>
-    <ion-label>Item Avatar</ion-label>
-  </ion-item>
-</template>
-
-<script>
-import { IonAvatar, IonChip, IonItem, IonLabel } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  components: { IonAvatar, IonChip, IonItem, IonLabel }
-});
-</script>
-```
-
-</TabItem>
-
-</Tabs>
+<Theming />
 
 ## Properties
 <Props />
@@ -217,4 +62,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/usage/avatar/basic/angular.md b/static/usage/avatar/basic/angular.md
new file mode 100644
index 00000000000..e3ccf947b3b
--- /dev/null
+++ b/static/usage/avatar/basic/angular.md
@@ -0,0 +1,5 @@
+```html
+<ion-avatar>
+  <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
+</ion-avatar>
+```
diff --git a/static/usage/avatar/basic/demo.html b/static/usage/avatar/basic/demo.html
new file mode 100644
index 00000000000..d6225f09842
--- /dev/null
+++ b/static/usage/avatar/basic/demo.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Avatar</title>
+  <link rel="stylesheet" href="../../common.css" />
+  <script src="../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-avatar>
+          <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
+        </ion-avatar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
diff --git a/static/usage/avatar/basic/index.md b/static/usage/avatar/basic/index.md
new file mode 100644
index 00000000000..5c31f3f5306
--- /dev/null
+++ b/static/usage/avatar/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/avatar/basic/demo.html" />
diff --git a/static/usage/avatar/basic/javascript.md b/static/usage/avatar/basic/javascript.md
new file mode 100644
index 00000000000..e3ccf947b3b
--- /dev/null
+++ b/static/usage/avatar/basic/javascript.md
@@ -0,0 +1,5 @@
+```html
+<ion-avatar>
+  <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
+</ion-avatar>
+```
diff --git a/static/usage/avatar/basic/react.md b/static/usage/avatar/basic/react.md
new file mode 100644
index 00000000000..bb27eded1f9
--- /dev/null
+++ b/static/usage/avatar/basic/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonAvatar } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonAvatar>
+        <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+      </IonAvatar>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/avatar/basic/vue.md b/static/usage/avatar/basic/vue.md
new file mode 100644
index 00000000000..8c52bbd218e
--- /dev/null
+++ b/static/usage/avatar/basic/vue.md
@@ -0,0 +1,16 @@
+```html
+<template>
+  <ion-avatar>
+    <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
+  </ion-avatar>
+</template>
+
+<script lang="ts">
+  import { IonAvatar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonAvatar },
+  });
+</script>
+```
diff --git a/static/usage/avatar/chip/angular.md b/static/usage/avatar/chip/angular.md
new file mode 100644
index 00000000000..5acbe12c940
--- /dev/null
+++ b/static/usage/avatar/chip/angular.md
@@ -0,0 +1,8 @@
+```html
+<ion-chip>
+  <ion-avatar>
+    <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
+  </ion-avatar>
+  <ion-label>Chip Avatar</ion-label>
+</ion-chip>
+```
diff --git a/static/usage/avatar/chip/demo.html b/static/usage/avatar/chip/demo.html
new file mode 100644
index 00000000000..07ea3911c49
--- /dev/null
+++ b/static/usage/avatar/chip/demo.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Avatar</title>
+  <link rel="stylesheet" href="../../common.css" />
+  <script src="../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-chip>
+          <ion-avatar>
+            <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
+          </ion-avatar>
+          <ion-label>Chip Avatar</ion-label>
+        </ion-chip>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
diff --git a/static/usage/avatar/chip/index.md b/static/usage/avatar/chip/index.md
new file mode 100644
index 00000000000..2acfeb4b578
--- /dev/null
+++ b/static/usage/avatar/chip/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/avatar/chip/demo.html" />
diff --git a/static/usage/avatar/chip/javascript.md b/static/usage/avatar/chip/javascript.md
new file mode 100644
index 00000000000..5acbe12c940
--- /dev/null
+++ b/static/usage/avatar/chip/javascript.md
@@ -0,0 +1,8 @@
+```html
+<ion-chip>
+  <ion-avatar>
+    <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
+  </ion-avatar>
+  <ion-label>Chip Avatar</ion-label>
+</ion-chip>
+```
diff --git a/static/usage/avatar/chip/react.md b/static/usage/avatar/chip/react.md
new file mode 100644
index 00000000000..3a7fe5ea297
--- /dev/null
+++ b/static/usage/avatar/chip/react.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonAvatar, IonChip, IonLabel } from '@ionic/react';
+function Example() {
+  return (
+    <>
+      <IonChip>
+        <IonAvatar>
+          <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+        </IonAvatar>
+        <IonLabel>Chip Avatar</IonLabel>
+      </IonChip>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/avatar/chip/vue.md b/static/usage/avatar/chip/vue.md
new file mode 100644
index 00000000000..0a53d354695
--- /dev/null
+++ b/static/usage/avatar/chip/vue.md
@@ -0,0 +1,19 @@
+```html
+<template>
+  <ion-chip>
+    <ion-avatar>
+      <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
+    </ion-avatar>
+    <ion-label>Chip Avatar</ion-label>
+  </ion-chip>
+</template>
+
+<script lang="ts">
+  import { IonAvatar, IonChip, IonLabel } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonAvatar, IonChip, IonLabel }
+  });
+</script>
+```
diff --git a/static/usage/avatar/item/angular.md b/static/usage/avatar/item/angular.md
new file mode 100644
index 00000000000..d62beaf7585
--- /dev/null
+++ b/static/usage/avatar/item/angular.md
@@ -0,0 +1,8 @@
+```html
+<ion-item>
+  <ion-avatar slot="start">
+    <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
+  </ion-avatar>
+  <ion-label>Item Avatar</ion-label>
+</ion-item>
+```
diff --git a/static/usage/avatar/item/demo.html b/static/usage/avatar/item/demo.html
new file mode 100644
index 00000000000..2fa12cc176f
--- /dev/null
+++ b/static/usage/avatar/item/demo.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Avatar</title>
+  <link rel="stylesheet" href="../../common.css" />
+  <script src="../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-avatar slot="start">
+            <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
+          </ion-avatar>
+          <ion-label>Item Avatar</ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
diff --git a/static/usage/avatar/item/index.md b/static/usage/avatar/item/index.md
new file mode 100644
index 00000000000..43630dba17e
--- /dev/null
+++ b/static/usage/avatar/item/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/avatar/item/demo.html" />
diff --git a/static/usage/avatar/item/javascript.md b/static/usage/avatar/item/javascript.md
new file mode 100644
index 00000000000..d62beaf7585
--- /dev/null
+++ b/static/usage/avatar/item/javascript.md
@@ -0,0 +1,8 @@
+```html
+<ion-item>
+  <ion-avatar slot="start">
+    <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
+  </ion-avatar>
+  <ion-label>Item Avatar</ion-label>
+</ion-item>
+```
diff --git a/static/usage/avatar/item/react.md b/static/usage/avatar/item/react.md
new file mode 100644
index 00000000000..6ca08a3b506
--- /dev/null
+++ b/static/usage/avatar/item/react.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonAvatar, IonItem, IonLabel } from '@ionic/react';
+function Example() {
+  return (
+    <>
+      <IonItem>
+        <IonAvatar slot="start">
+          <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+        </IonAvatar>
+        <IonLabel>Item Avatar</IonLabel>
+      </IonItem>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/avatar/item/vue.md b/static/usage/avatar/item/vue.md
new file mode 100644
index 00000000000..4a2d22dc035
--- /dev/null
+++ b/static/usage/avatar/item/vue.md
@@ -0,0 +1,19 @@
+```html
+<template>
+  <ion-item>
+    <ion-avatar slot="start">
+      <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
+    </ion-avatar>
+    <ion-label>Item Avatar</ion-label>
+  </ion-item>
+</template>
+
+<script lang="ts">
+  import { IonAvatar, IonItem, IonLabel } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonAvatar, IonItem, IonLabel }
+  });
+</script>
+```
diff --git a/static/usage/avatar/theming/angular/angular-css.md b/static/usage/avatar/theming/angular/angular-css.md
new file mode 100644
index 00000000000..5a97e1fc6ae
--- /dev/null
+++ b/static/usage/avatar/theming/angular/angular-css.md
@@ -0,0 +1,5 @@
+```css
+ion-avatar {
+  --border-radius: 4px;
+}
+```
diff --git a/static/usage/avatar/theming/angular/angular-html.md b/static/usage/avatar/theming/angular/angular-html.md
new file mode 100644
index 00000000000..e3ccf947b3b
--- /dev/null
+++ b/static/usage/avatar/theming/angular/angular-html.md
@@ -0,0 +1,5 @@
+```html
+<ion-avatar>
+  <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
+</ion-avatar>
+```
diff --git a/static/usage/avatar/theming/demo.html b/static/usage/avatar/theming/demo.html
new file mode 100644
index 00000000000..5681d43e6be
--- /dev/null
+++ b/static/usage/avatar/theming/demo.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Avatar</title>
+  <link rel="stylesheet" href="../../common.css" />
+  <script src="../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-avatar {
+      --border-radius: 4px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-avatar slot="start">
+          <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
+        </ion-avatar>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
diff --git a/static/usage/avatar/theming/index.md b/static/usage/avatar/theming/index.md
new file mode 100644
index 00000000000..af3b37d8532
--- /dev/null
+++ b/static/usage/avatar/theming/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import reactTSX from './react/react-tsx.md';
+import reactCSS from './react/react-css.md';
+
+import vue from './vue.md';
+
+import angularHTML from './angular/angular-html.md';
+import angularCSS from './angular/angular-css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': reactTSX,
+        'src/main.css': reactCSS
+      }
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.css': angularCSS
+      }
+    },
+  }}
+  src="usage/avatar/theming/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/avatar/theming/javascript.md b/static/usage/avatar/theming/javascript.md
new file mode 100644
index 00000000000..ab0223d5dcb
--- /dev/null
+++ b/static/usage/avatar/theming/javascript.md
@@ -0,0 +1,11 @@
+```html
+<style>
+  ion-avatar {
+    --border-radius: 4px;
+  }
+</style>
+
+<ion-avatar>
+  <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
+</ion-avatar>
+```
diff --git a/static/usage/avatar/theming/react.md b/static/usage/avatar/theming/react.md
new file mode 100644
index 00000000000..53f534195ee
--- /dev/null
+++ b/static/usage/avatar/theming/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonAvatar, IonItem, IonLabel } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <IonItem>
+        <IonAvatar slot="start">
+          <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+        </IonAvatar>
+        <IonLabel>Item Avatar</IonLabel>
+      </IonItem>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/avatar/theming/react/react-css.md b/static/usage/avatar/theming/react/react-css.md
new file mode 100644
index 00000000000..5a97e1fc6ae
--- /dev/null
+++ b/static/usage/avatar/theming/react/react-css.md
@@ -0,0 +1,5 @@
+```css
+ion-avatar {
+  --border-radius: 4px;
+}
+```
diff --git a/static/usage/avatar/theming/react/react-tsx.md b/static/usage/avatar/theming/react/react-tsx.md
new file mode 100644
index 00000000000..9620ab43d94
--- /dev/null
+++ b/static/usage/avatar/theming/react/react-tsx.md
@@ -0,0 +1,18 @@
+
+```tsx
+import React from 'react';
+import { IonAvatar } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <IonAvatar>
+        <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+      </IonAvatar>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/avatar/theming/vue.md b/static/usage/avatar/theming/vue.md
new file mode 100644
index 00000000000..df9372ffa92
--- /dev/null
+++ b/static/usage/avatar/theming/vue.md
@@ -0,0 +1,22 @@
+```html
+<template>
+  <ion-avatar>
+    <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
+  </ion-avatar>
+</template>
+
+<script lang="ts">
+  import { IonAvatar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonAvatar }
+  });
+</script>
+
+<style scoped>
+  ion-avatar {
+    --border-radius: 4px;
+  }
+</style>
+```

From c19da7af253782b53f3fb078f8931a539de52d64 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Thu, 1 Sep 2022 14:16:52 -0400
Subject: [PATCH 2/5] docs(chip): update avatar URL to match avatar demos

---
 static/usage/chip/slots/angular.md    | 2 +-
 static/usage/chip/slots/demo.html     | 2 +-
 static/usage/chip/slots/javascript.md | 2 +-
 static/usage/chip/slots/react.md      | 2 +-
 static/usage/chip/slots/vue.md        | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/static/usage/chip/slots/angular.md b/static/usage/chip/slots/angular.md
index 6387a0e55ba..0013a8297f4 100644
--- a/static/usage/chip/slots/angular.md
+++ b/static/usage/chip/slots/angular.md
@@ -1,7 +1,7 @@
 ```html
 <ion-chip>
   <ion-avatar>
-    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
+    <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
   </ion-avatar>
   <ion-label>Avatar Chip</ion-label>
   <ion-icon name="close-circle"></ion-icon>
diff --git a/static/usage/chip/slots/demo.html b/static/usage/chip/slots/demo.html
index fd3f22a72df..f83fcba81b0 100644
--- a/static/usage/chip/slots/demo.html
+++ b/static/usage/chip/slots/demo.html
@@ -18,7 +18,7 @@
       <div class="container">
         <ion-chip>
           <ion-avatar>
-            <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+            <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
           </ion-avatar>
           <ion-label>Avatar Chip</ion-label>
           <ion-icon name="close-circle"></ion-icon>
diff --git a/static/usage/chip/slots/javascript.md b/static/usage/chip/slots/javascript.md
index 6387a0e55ba..0013a8297f4 100644
--- a/static/usage/chip/slots/javascript.md
+++ b/static/usage/chip/slots/javascript.md
@@ -1,7 +1,7 @@
 ```html
 <ion-chip>
   <ion-avatar>
-    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
+    <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
   </ion-avatar>
   <ion-label>Avatar Chip</ion-label>
   <ion-icon name="close-circle"></ion-icon>
diff --git a/static/usage/chip/slots/react.md b/static/usage/chip/slots/react.md
index 25fd0d192b1..89163651806 100644
--- a/static/usage/chip/slots/react.md
+++ b/static/usage/chip/slots/react.md
@@ -8,7 +8,7 @@ function Example() {
     <>
       <IonChip>
         <IonAvatar>
-          <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
+          <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
         </IonAvatar>
         <IonLabel>Avatar Chip</IonLabel>
         <IonIcon icon={closeCircle}></IonIcon>
diff --git a/static/usage/chip/slots/vue.md b/static/usage/chip/slots/vue.md
index 29e12166788..fba86728e52 100644
--- a/static/usage/chip/slots/vue.md
+++ b/static/usage/chip/slots/vue.md
@@ -2,7 +2,7 @@
 <template>
   <ion-chip>
     <ion-avatar>
-      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
+      <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
     </ion-avatar>
     <ion-label>Avatar Chip</ion-label>
     <ion-icon :icon="closeCircle"></ion-icon>

From 83d303965f2e58a87d0a97872180167b55e762c8 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Thu, 1 Sep 2022 14:42:51 -0400
Subject: [PATCH 3/5] chore(avatar): rename files to new naming covention

---
 .../angular/{angular-css.md => example_component_css.md}  | 0
 .../{angular-html.md => example_component_html.md}        | 0
 static/usage/avatar/theming/index.md                      | 8 ++++----
 .../avatar/theming/react/{react-css.md => main_css.md}    | 0
 .../avatar/theming/react/{react-tsx.md => main_tsx.md}    | 0
 5 files changed, 4 insertions(+), 4 deletions(-)
 rename static/usage/avatar/theming/angular/{angular-css.md => example_component_css.md} (100%)
 rename static/usage/avatar/theming/angular/{angular-html.md => example_component_html.md} (100%)
 rename static/usage/avatar/theming/react/{react-css.md => main_css.md} (100%)
 rename static/usage/avatar/theming/react/{react-tsx.md => main_tsx.md} (100%)

diff --git a/static/usage/avatar/theming/angular/angular-css.md b/static/usage/avatar/theming/angular/example_component_css.md
similarity index 100%
rename from static/usage/avatar/theming/angular/angular-css.md
rename to static/usage/avatar/theming/angular/example_component_css.md
diff --git a/static/usage/avatar/theming/angular/angular-html.md b/static/usage/avatar/theming/angular/example_component_html.md
similarity index 100%
rename from static/usage/avatar/theming/angular/angular-html.md
rename to static/usage/avatar/theming/angular/example_component_html.md
diff --git a/static/usage/avatar/theming/index.md b/static/usage/avatar/theming/index.md
index af3b37d8532..e586aae743b 100644
--- a/static/usage/avatar/theming/index.md
+++ b/static/usage/avatar/theming/index.md
@@ -2,13 +2,13 @@ import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
 
-import reactTSX from './react/react-tsx.md';
-import reactCSS from './react/react-css.md';
+import reactTSX from './react/main_tsx.md';
+import reactCSS from './react/main_css.md';
 
 import vue from './vue.md';
 
-import angularHTML from './angular/angular-html.md';
-import angularCSS from './angular/angular-css.md';
+import angularHTML from './angular/example_component_html.md';
+import angularCSS from './angular/example_component_css.md';
 
 <Playground
   code={{
diff --git a/static/usage/avatar/theming/react/react-css.md b/static/usage/avatar/theming/react/main_css.md
similarity index 100%
rename from static/usage/avatar/theming/react/react-css.md
rename to static/usage/avatar/theming/react/main_css.md
diff --git a/static/usage/avatar/theming/react/react-tsx.md b/static/usage/avatar/theming/react/main_tsx.md
similarity index 100%
rename from static/usage/avatar/theming/react/react-tsx.md
rename to static/usage/avatar/theming/react/main_tsx.md

From be3810d06743b6d8e906cbf2756c68e1587e615e Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Thu, 1 Sep 2022 15:46:44 -0400
Subject: [PATCH 4/5] fix(avatar): update svg file

---
 static/demos/api/avatar/avatar.svg | 13 ++++++++++++-
 static/img/avatar.svg              | 13 ++++++++++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/static/demos/api/avatar/avatar.svg b/static/demos/api/avatar/avatar.svg
index 90c4d0e9cbd..bd0cec9a9c1 100644
--- a/static/demos/api/avatar/avatar.svg
+++ b/static/demos/api/avatar/avatar.svg
@@ -1 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#c5dbff" d="M0 0h512v512H0z"/><path d="M256 304c61.6 0 112-50.4 112-112S317.6 80 256 80s-112 50.4-112 112 50.4 112 112 112zm0 40c-74.2 0-224 37.8-224 112v56h448v-56c0-74.2-149.8-112-224-112z" fill="#82aeff"/></svg>
\ No newline at end of file
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1765_7055)">
+<path d="M0 0H512V512H0V0Z" fill="#222D3A"/>
+<path d="M330.085 110.955C311.299 90.672 285.059 79.5024 256.097 79.5024C226.981 79.5024 200.655 90.6044 181.955 110.762C163.053 131.141 153.843 158.838 156.005 188.746C160.292 247.751 205.192 295.75 256.097 295.75C307.003 295.75 351.826 247.76 356.18 188.765C358.371 159.128 349.103 131.489 330.085 110.955Z" fill="#B3BAC0"/>
+<path d="M53.9275 511.997H458.333C459 503 458.206 483.499 456.333 473.141C448.185 427.941 422.757 389.972 382.789 363.327C347.282 339.675 302.305 326.642 256.13 326.642C209.956 326.642 164.978 339.666 129.471 363.327C89.5038 389.982 64.0754 427.951 55.9275 473.15C54.0546 483.509 53.5001 504.5 53.9275 511.997Z" fill="#B3BAC0"/>
+</g>
+<defs>
+<clipPath id="clip0_1765_7055">
+<rect width="512" height="512" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/img/avatar.svg b/static/img/avatar.svg
index 90c4d0e9cbd..bd0cec9a9c1 100644
--- a/static/img/avatar.svg
+++ b/static/img/avatar.svg
@@ -1 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#c5dbff" d="M0 0h512v512H0z"/><path d="M256 304c61.6 0 112-50.4 112-112S317.6 80 256 80s-112 50.4-112 112 50.4 112 112 112zm0 40c-74.2 0-224 37.8-224 112v56h448v-56c0-74.2-149.8-112-224-112z" fill="#82aeff"/></svg>
\ No newline at end of file
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1765_7055)">
+<path d="M0 0H512V512H0V0Z" fill="#222D3A"/>
+<path d="M330.085 110.955C311.299 90.672 285.059 79.5024 256.097 79.5024C226.981 79.5024 200.655 90.6044 181.955 110.762C163.053 131.141 153.843 158.838 156.005 188.746C160.292 247.751 205.192 295.75 256.097 295.75C307.003 295.75 351.826 247.76 356.18 188.765C358.371 159.128 349.103 131.489 330.085 110.955Z" fill="#B3BAC0"/>
+<path d="M53.9275 511.997H458.333C459 503 458.206 483.499 456.333 473.141C448.185 427.941 422.757 389.972 382.789 363.327C347.282 339.675 302.305 326.642 256.13 326.642C209.956 326.642 164.978 339.666 129.471 363.327C89.5038 389.982 64.0754 427.951 55.9275 473.15C54.0546 483.509 53.5001 504.5 53.9275 511.997Z" fill="#B3BAC0"/>
+</g>
+<defs>
+<clipPath id="clip0_1765_7055">
+<rect width="512" height="512" fill="white"/>
+</clipPath>
+</defs>
+</svg>

From 1d58b6200ade2eb9b02e0afaa0e39e49604a5fb8 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Thu, 1 Sep 2022 16:15:51 -0400
Subject: [PATCH 5/5] fix(usage): update img to include alt text

---
 static/usage/avatar/basic/angular.md                          | 2 +-
 static/usage/avatar/basic/demo.html                           | 2 +-
 static/usage/avatar/basic/javascript.md                       | 2 +-
 static/usage/avatar/basic/react.md                            | 2 +-
 static/usage/avatar/basic/vue.md                              | 2 +-
 static/usage/avatar/chip/angular.md                           | 2 +-
 static/usage/avatar/chip/demo.html                            | 2 +-
 static/usage/avatar/chip/javascript.md                        | 2 +-
 static/usage/avatar/chip/react.md                             | 2 +-
 static/usage/avatar/chip/vue.md                               | 2 +-
 static/usage/avatar/item/angular.md                           | 2 +-
 static/usage/avatar/item/demo.html                            | 2 +-
 static/usage/avatar/item/javascript.md                        | 2 +-
 static/usage/avatar/item/react.md                             | 2 +-
 static/usage/avatar/item/vue.md                               | 2 +-
 static/usage/avatar/theming/angular/example_component_html.md | 2 +-
 static/usage/avatar/theming/demo.html                         | 2 +-
 static/usage/avatar/theming/javascript.md                     | 2 +-
 static/usage/avatar/theming/react.md                          | 2 +-
 static/usage/avatar/theming/react/main_tsx.md                 | 2 +-
 static/usage/avatar/theming/vue.md                            | 2 +-
 static/usage/chip/slots/angular.md                            | 2 +-
 static/usage/chip/slots/demo.html                             | 2 +-
 static/usage/chip/slots/javascript.md                         | 2 +-
 static/usage/chip/slots/react.md                              | 2 +-
 static/usage/chip/slots/vue.md                                | 2 +-
 26 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/static/usage/avatar/basic/angular.md b/static/usage/avatar/basic/angular.md
index e3ccf947b3b..0e544a336b8 100644
--- a/static/usage/avatar/basic/angular.md
+++ b/static/usage/avatar/basic/angular.md
@@ -1,5 +1,5 @@
 ```html
 <ion-avatar>
-  <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
+  <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
 </ion-avatar>
 ```
diff --git a/static/usage/avatar/basic/demo.html b/static/usage/avatar/basic/demo.html
index d6225f09842..f4b499736c2 100644
--- a/static/usage/avatar/basic/demo.html
+++ b/static/usage/avatar/basic/demo.html
@@ -17,7 +17,7 @@
     <ion-content>
       <div class="container">
         <ion-avatar>
-          <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
+          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
         </ion-avatar>
       </div>
     </ion-content>
diff --git a/static/usage/avatar/basic/javascript.md b/static/usage/avatar/basic/javascript.md
index e3ccf947b3b..0e544a336b8 100644
--- a/static/usage/avatar/basic/javascript.md
+++ b/static/usage/avatar/basic/javascript.md
@@ -1,5 +1,5 @@
 ```html
 <ion-avatar>
-  <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
+  <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
 </ion-avatar>
 ```
diff --git a/static/usage/avatar/basic/react.md b/static/usage/avatar/basic/react.md
index bb27eded1f9..419456d4733 100644
--- a/static/usage/avatar/basic/react.md
+++ b/static/usage/avatar/basic/react.md
@@ -6,7 +6,7 @@ function Example() {
   return (
     <>
       <IonAvatar>
-        <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+        <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
       </IonAvatar>
     </>
   );
diff --git a/static/usage/avatar/basic/vue.md b/static/usage/avatar/basic/vue.md
index 8c52bbd218e..95bee27c769 100644
--- a/static/usage/avatar/basic/vue.md
+++ b/static/usage/avatar/basic/vue.md
@@ -1,7 +1,7 @@
 ```html
 <template>
   <ion-avatar>
-    <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
+    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
   </ion-avatar>
 </template>
 
diff --git a/static/usage/avatar/chip/angular.md b/static/usage/avatar/chip/angular.md
index 5acbe12c940..767e5bc3ff3 100644
--- a/static/usage/avatar/chip/angular.md
+++ b/static/usage/avatar/chip/angular.md
@@ -1,7 +1,7 @@
 ```html
 <ion-chip>
   <ion-avatar>
-    <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
+    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
   </ion-avatar>
   <ion-label>Chip Avatar</ion-label>
 </ion-chip>
diff --git a/static/usage/avatar/chip/demo.html b/static/usage/avatar/chip/demo.html
index 07ea3911c49..bf827440dd6 100644
--- a/static/usage/avatar/chip/demo.html
+++ b/static/usage/avatar/chip/demo.html
@@ -18,7 +18,7 @@
       <div class="container">
         <ion-chip>
           <ion-avatar>
-            <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
+            <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
           </ion-avatar>
           <ion-label>Chip Avatar</ion-label>
         </ion-chip>
diff --git a/static/usage/avatar/chip/javascript.md b/static/usage/avatar/chip/javascript.md
index 5acbe12c940..767e5bc3ff3 100644
--- a/static/usage/avatar/chip/javascript.md
+++ b/static/usage/avatar/chip/javascript.md
@@ -1,7 +1,7 @@
 ```html
 <ion-chip>
   <ion-avatar>
-    <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
+    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
   </ion-avatar>
   <ion-label>Chip Avatar</ion-label>
 </ion-chip>
diff --git a/static/usage/avatar/chip/react.md b/static/usage/avatar/chip/react.md
index 3a7fe5ea297..237cbd54d64 100644
--- a/static/usage/avatar/chip/react.md
+++ b/static/usage/avatar/chip/react.md
@@ -6,7 +6,7 @@ function Example() {
     <>
       <IonChip>
         <IonAvatar>
-          <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
         </IonAvatar>
         <IonLabel>Chip Avatar</IonLabel>
       </IonChip>
diff --git a/static/usage/avatar/chip/vue.md b/static/usage/avatar/chip/vue.md
index 0a53d354695..fe07bebe1ad 100644
--- a/static/usage/avatar/chip/vue.md
+++ b/static/usage/avatar/chip/vue.md
@@ -2,7 +2,7 @@
 <template>
   <ion-chip>
     <ion-avatar>
-      <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
+      <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
     </ion-avatar>
     <ion-label>Chip Avatar</ion-label>
   </ion-chip>
diff --git a/static/usage/avatar/item/angular.md b/static/usage/avatar/item/angular.md
index d62beaf7585..20a7db662dc 100644
--- a/static/usage/avatar/item/angular.md
+++ b/static/usage/avatar/item/angular.md
@@ -1,7 +1,7 @@
 ```html
 <ion-item>
   <ion-avatar slot="start">
-    <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
+    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
   </ion-avatar>
   <ion-label>Item Avatar</ion-label>
 </ion-item>
diff --git a/static/usage/avatar/item/demo.html b/static/usage/avatar/item/demo.html
index 2fa12cc176f..dde84e47480 100644
--- a/static/usage/avatar/item/demo.html
+++ b/static/usage/avatar/item/demo.html
@@ -18,7 +18,7 @@
       <div class="container">
         <ion-item>
           <ion-avatar slot="start">
-            <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
+            <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
           </ion-avatar>
           <ion-label>Item Avatar</ion-label>
         </ion-item>
diff --git a/static/usage/avatar/item/javascript.md b/static/usage/avatar/item/javascript.md
index d62beaf7585..20a7db662dc 100644
--- a/static/usage/avatar/item/javascript.md
+++ b/static/usage/avatar/item/javascript.md
@@ -1,7 +1,7 @@
 ```html
 <ion-item>
   <ion-avatar slot="start">
-    <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
+    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
   </ion-avatar>
   <ion-label>Item Avatar</ion-label>
 </ion-item>
diff --git a/static/usage/avatar/item/react.md b/static/usage/avatar/item/react.md
index 6ca08a3b506..b652100dbeb 100644
--- a/static/usage/avatar/item/react.md
+++ b/static/usage/avatar/item/react.md
@@ -6,7 +6,7 @@ function Example() {
     <>
       <IonItem>
         <IonAvatar slot="start">
-          <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
         </IonAvatar>
         <IonLabel>Item Avatar</IonLabel>
       </IonItem>
diff --git a/static/usage/avatar/item/vue.md b/static/usage/avatar/item/vue.md
index 4a2d22dc035..745d67ed32e 100644
--- a/static/usage/avatar/item/vue.md
+++ b/static/usage/avatar/item/vue.md
@@ -2,7 +2,7 @@
 <template>
   <ion-item>
     <ion-avatar slot="start">
-      <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
+      <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
     </ion-avatar>
     <ion-label>Item Avatar</ion-label>
   </ion-item>
diff --git a/static/usage/avatar/theming/angular/example_component_html.md b/static/usage/avatar/theming/angular/example_component_html.md
index e3ccf947b3b..0e544a336b8 100644
--- a/static/usage/avatar/theming/angular/example_component_html.md
+++ b/static/usage/avatar/theming/angular/example_component_html.md
@@ -1,5 +1,5 @@
 ```html
 <ion-avatar>
-  <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
+  <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
 </ion-avatar>
 ```
diff --git a/static/usage/avatar/theming/demo.html b/static/usage/avatar/theming/demo.html
index 5681d43e6be..0d3c4b67ac2 100644
--- a/static/usage/avatar/theming/demo.html
+++ b/static/usage/avatar/theming/demo.html
@@ -22,7 +22,7 @@
     <ion-content>
       <div class="container">
         <ion-avatar slot="start">
-          <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
+          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
         </ion-avatar>
       </div>
     </ion-content>
diff --git a/static/usage/avatar/theming/javascript.md b/static/usage/avatar/theming/javascript.md
index ab0223d5dcb..96e64bcf277 100644
--- a/static/usage/avatar/theming/javascript.md
+++ b/static/usage/avatar/theming/javascript.md
@@ -6,6 +6,6 @@
 </style>
 
 <ion-avatar>
-  <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
+  <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
 </ion-avatar>
 ```
diff --git a/static/usage/avatar/theming/react.md b/static/usage/avatar/theming/react.md
index 53f534195ee..7d0e98290b8 100644
--- a/static/usage/avatar/theming/react.md
+++ b/static/usage/avatar/theming/react.md
@@ -9,7 +9,7 @@ function Example() {
     <>
       <IonItem>
         <IonAvatar slot="start">
-          <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
         </IonAvatar>
         <IonLabel>Item Avatar</IonLabel>
       </IonItem>
diff --git a/static/usage/avatar/theming/react/main_tsx.md b/static/usage/avatar/theming/react/main_tsx.md
index 9620ab43d94..4824f336b9c 100644
--- a/static/usage/avatar/theming/react/main_tsx.md
+++ b/static/usage/avatar/theming/react/main_tsx.md
@@ -9,7 +9,7 @@ function Example() {
   return (
     <>
       <IonAvatar>
-        <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+        <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
       </IonAvatar>
     </>
   );
diff --git a/static/usage/avatar/theming/vue.md b/static/usage/avatar/theming/vue.md
index df9372ffa92..235fb00ea0b 100644
--- a/static/usage/avatar/theming/vue.md
+++ b/static/usage/avatar/theming/vue.md
@@ -1,7 +1,7 @@
 ```html
 <template>
   <ion-avatar>
-    <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
+    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
   </ion-avatar>
 </template>
 
diff --git a/static/usage/chip/slots/angular.md b/static/usage/chip/slots/angular.md
index 0013a8297f4..3fbc4818f43 100644
--- a/static/usage/chip/slots/angular.md
+++ b/static/usage/chip/slots/angular.md
@@ -1,7 +1,7 @@
 ```html
 <ion-chip>
   <ion-avatar>
-    <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
   </ion-avatar>
   <ion-label>Avatar Chip</ion-label>
   <ion-icon name="close-circle"></ion-icon>
diff --git a/static/usage/chip/slots/demo.html b/static/usage/chip/slots/demo.html
index f83fcba81b0..4888fb8d911 100644
--- a/static/usage/chip/slots/demo.html
+++ b/static/usage/chip/slots/demo.html
@@ -18,7 +18,7 @@
       <div class="container">
         <ion-chip>
           <ion-avatar>
-            <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg">
+            <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
           </ion-avatar>
           <ion-label>Avatar Chip</ion-label>
           <ion-icon name="close-circle"></ion-icon>
diff --git a/static/usage/chip/slots/javascript.md b/static/usage/chip/slots/javascript.md
index 0013a8297f4..3fbc4818f43 100644
--- a/static/usage/chip/slots/javascript.md
+++ b/static/usage/chip/slots/javascript.md
@@ -1,7 +1,7 @@
 ```html
 <ion-chip>
   <ion-avatar>
-    <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
   </ion-avatar>
   <ion-label>Avatar Chip</ion-label>
   <ion-icon name="close-circle"></ion-icon>
diff --git a/static/usage/chip/slots/react.md b/static/usage/chip/slots/react.md
index 89163651806..7a36f9b68c5 100644
--- a/static/usage/chip/slots/react.md
+++ b/static/usage/chip/slots/react.md
@@ -8,7 +8,7 @@ function Example() {
     <>
       <IonChip>
         <IonAvatar>
-          <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
         </IonAvatar>
         <IonLabel>Avatar Chip</IonLabel>
         <IonIcon icon={closeCircle}></IonIcon>
diff --git a/static/usage/chip/slots/vue.md b/static/usage/chip/slots/vue.md
index fba86728e52..24ef77077f2 100644
--- a/static/usage/chip/slots/vue.md
+++ b/static/usage/chip/slots/vue.md
@@ -2,7 +2,7 @@
 <template>
   <ion-chip>
     <ion-avatar>
-      <img src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
+      <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/demos/api/avatar/avatar.svg" />
     </ion-avatar>
     <ion-label>Avatar Chip</ion-label>
     <ion-icon :icon="closeCircle"></ion-icon>