From 7ac50a58c36f251ebdb7e4e6439831463beb1ce4 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Fri, 13 Nov 2026 12:47:07 -0500
Subject: [PATCH 1/2] docs(badge): register icons in the JavaScript tab bar
 playground

The JavaScript "Badges in Tab Buttons" example used ion-icon names without
registering them, so StackBlitz fetched /svg/*.svg and the icons did not
load. Split it into index.html and index.ts and register the icons with
addIcons, matching the other JavaScript examples.

Also remove unused javascript.md files from the reorder custom-icon and
fab css-shadow-parts examples, which already load javascript/index_html.md
and javascript/index_ts.md.
---
 .../usage/v8/badge/inside-tab-bar/index.mdx   | 10 +++-
 .../index_html.md}                            |  0
 .../inside-tab-bar/javascript/index_ts.md     | 46 +++++++++++++++
 .../theming/css-shadow-parts/javascript.md    | 37 ------------
 .../v8/reorder/custom-icon/javascript.md      | 56 -------------------
 .../usage/v9/badge/inside-tab-bar/index.mdx   | 10 +++-
 .../index_html.md}                            |  0
 .../inside-tab-bar/javascript/index_ts.md     | 46 +++++++++++++++
 .../theming/css-shadow-parts/javascript.md    | 37 ------------
 .../v9/reorder/custom-icon/javascript.md      | 56 -------------------
 10 files changed, 108 insertions(+), 190 deletions(-)
 rename static/usage/v8/badge/inside-tab-bar/{javascript.md => javascript/index_html.md} (100%)
 create mode 100644 static/usage/v8/badge/inside-tab-bar/javascript/index_ts.md
 delete mode 100644 static/usage/v8/fab/theming/css-shadow-parts/javascript.md
 delete mode 100644 static/usage/v8/reorder/custom-icon/javascript.md
 rename static/usage/v9/badge/inside-tab-bar/{javascript.md => javascript/index_html.md} (100%)
 create mode 100644 static/usage/v9/badge/inside-tab-bar/javascript/index_ts.md
 delete mode 100644 static/usage/v9/fab/theming/css-shadow-parts/javascript.md
 delete mode 100644 static/usage/v9/reorder/custom-icon/javascript.md

diff --git a/static/usage/v8/badge/inside-tab-bar/index.mdx b/static/usage/v8/badge/inside-tab-bar/index.mdx
index 66e65779a9c..6ab7f81a3b5 100644
--- a/static/usage/v8/badge/inside-tab-bar/index.mdx
+++ b/static/usage/v8/badge/inside-tab-bar/index.mdx
@@ -1,6 +1,7 @@
 import Playground from '@site/src/components/global/Playground';
 
-import javascript from './javascript.md';
+import javascript_index_html from './javascript/index_html.md';
+import javascript_index_ts from './javascript/index_ts.md';
 import react from './react.md';
 import vue from './vue.md';
 
@@ -10,7 +11,12 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 <Playground
   version="8"
   code={{
-    javascript,
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'index.ts': javascript_index_ts,
+      },
+    },
     react,
     vue,
     angular: {
diff --git a/static/usage/v8/badge/inside-tab-bar/javascript.md b/static/usage/v8/badge/inside-tab-bar/javascript/index_html.md
similarity index 100%
rename from static/usage/v8/badge/inside-tab-bar/javascript.md
rename to static/usage/v8/badge/inside-tab-bar/javascript/index_html.md
diff --git a/static/usage/v8/badge/inside-tab-bar/javascript/index_ts.md b/static/usage/v8/badge/inside-tab-bar/javascript/index_ts.md
new file mode 100644
index 00000000000..ce024465bf5
--- /dev/null
+++ b/static/usage/v8/badge/inside-tab-bar/javascript/index_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { calendar, heart, musicalNote } from 'ionicons/icons';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/core/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/core/css/normalize.css';
+import '@ionic/core/css/structure.css';
+import '@ionic/core/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/core/css/padding.css';
+import '@ionic/core/css/float-elements.css';
+import '@ionic/core/css/text-alignment.css';
+import '@ionic/core/css/text-transformation.css';
+import '@ionic/core/css/flex-utils.css';
+import '@ionic/core/css/display.css';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ these icons
+ * get mapped to a kebab-case key.
+ * Alternatively, developers can do:
+ * addIcons({ 'calendar': calendar, 'heart': heart, 'musical-note': musicalNote });
+ */
+addIcons({ calendar, heart, musicalNote });
+
+defineCustomElements();
+```
diff --git a/static/usage/v8/fab/theming/css-shadow-parts/javascript.md b/static/usage/v8/fab/theming/css-shadow-parts/javascript.md
deleted file mode 100644
index cd18636cadc..00000000000
--- a/static/usage/v8/fab/theming/css-shadow-parts/javascript.md
+++ /dev/null
@@ -1,37 +0,0 @@
-```html
-<style>
-  ion-fab-button::part(native) {
-    background-color: #b7f399;
-    border-radius: 15px;
-    box-shadow:
-      0px 1px 2px 0px rgba(0, 0, 0, 0.3),
-      0px 1px 3px 1px rgba(0, 0, 0, 0.15);
-    color: black;
-  }
-
-  ion-fab-button::part(native):hover::after {
-    background-color: #a3e681;
-  }
-
-  ion-fab-button::part(native):active::after {
-    background-color: #87d361;
-  }
-</style>
-
-<ion-fab>
-  <ion-fab-button>
-    <ion-icon name="add"></ion-icon>
-  </ion-fab-button>
-  <ion-fab-list side="end">
-    <ion-fab-button>
-      <ion-icon name="document"></ion-icon>
-    </ion-fab-button>
-    <ion-fab-button>
-      <ion-icon name="color-palette"></ion-icon>
-    </ion-fab-button>
-    <ion-fab-button>
-      <ion-icon name="globe"></ion-icon>
-    </ion-fab-button>
-  </ion-fab-list>
-</ion-fab>
-```
diff --git a/static/usage/v8/reorder/custom-icon/javascript.md b/static/usage/v8/reorder/custom-icon/javascript.md
deleted file mode 100644
index 8535da7544a..00000000000
--- a/static/usage/v8/reorder/custom-icon/javascript.md
+++ /dev/null
@@ -1,56 +0,0 @@
-```html
-<ion-list>
-  <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
-  <ion-reorder-group disabled="false">
-    <ion-item>
-      <ion-label> Item 1 </ion-label>
-      <ion-reorder slot="end">
-        <ion-icon name="pizza"></ion-icon>
-      </ion-reorder>
-    </ion-item>
-
-    <ion-item>
-      <ion-label> Item 2 </ion-label>
-      <ion-reorder slot="end">
-        <ion-icon name="pizza"></ion-icon>
-      </ion-reorder>
-    </ion-item>
-
-    <ion-item>
-      <ion-label> Item 3 </ion-label>
-      <ion-reorder slot="end">
-        <ion-icon name="pizza"></ion-icon>
-      </ion-reorder>
-    </ion-item>
-
-    <ion-item>
-      <ion-label> Item 4 </ion-label>
-      <ion-reorder slot="end">
-        <ion-icon name="pizza"></ion-icon>
-      </ion-reorder>
-    </ion-item>
-
-    <ion-item>
-      <ion-label> Item 5 </ion-label>
-      <ion-reorder slot="end">
-        <ion-icon name="pizza"></ion-icon>
-      </ion-reorder>
-    </ion-item>
-  </ion-reorder-group>
-</ion-list>
-
-<script>
-  const reorderGroup = document.querySelector('ion-reorder-group');
-
-  reorderGroup.addEventListener('ionReorderEnd', ({ detail }) => {
-    // The `from` and `to` properties contain the index of the item
-    // when the drag started and ended, respectively
-    console.log('Dragged from index', detail.from, 'to', detail.to);
-
-    // Finish the reorder and position the item in the DOM based on
-    // where the gesture ended. This method can also be called directly
-    // by the reorder group.
-    detail.complete();
-  });
-</script>
-```
diff --git a/static/usage/v9/badge/inside-tab-bar/index.mdx b/static/usage/v9/badge/inside-tab-bar/index.mdx
index f76114f8483..bcfb30032c7 100644
--- a/static/usage/v9/badge/inside-tab-bar/index.mdx
+++ b/static/usage/v9/badge/inside-tab-bar/index.mdx
@@ -1,6 +1,7 @@
 import Playground from '@site/src/components/global/Playground';
 
-import javascript from './javascript.md';
+import javascript_index_html from './javascript/index_html.md';
+import javascript_index_ts from './javascript/index_ts.md';
 import react from './react.md';
 import vue from './vue.md';
 
@@ -10,7 +11,12 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 <Playground
   version="9"
   code={{
-    javascript,
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'index.ts': javascript_index_ts,
+      },
+    },
     react,
     vue,
     angular: {
diff --git a/static/usage/v9/badge/inside-tab-bar/javascript.md b/static/usage/v9/badge/inside-tab-bar/javascript/index_html.md
similarity index 100%
rename from static/usage/v9/badge/inside-tab-bar/javascript.md
rename to static/usage/v9/badge/inside-tab-bar/javascript/index_html.md
diff --git a/static/usage/v9/badge/inside-tab-bar/javascript/index_ts.md b/static/usage/v9/badge/inside-tab-bar/javascript/index_ts.md
new file mode 100644
index 00000000000..ce024465bf5
--- /dev/null
+++ b/static/usage/v9/badge/inside-tab-bar/javascript/index_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { calendar, heart, musicalNote } from 'ionicons/icons';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/core/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/core/css/normalize.css';
+import '@ionic/core/css/structure.css';
+import '@ionic/core/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/core/css/padding.css';
+import '@ionic/core/css/float-elements.css';
+import '@ionic/core/css/text-alignment.css';
+import '@ionic/core/css/text-transformation.css';
+import '@ionic/core/css/flex-utils.css';
+import '@ionic/core/css/display.css';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ these icons
+ * get mapped to a kebab-case key.
+ * Alternatively, developers can do:
+ * addIcons({ 'calendar': calendar, 'heart': heart, 'musical-note': musicalNote });
+ */
+addIcons({ calendar, heart, musicalNote });
+
+defineCustomElements();
+```
diff --git a/static/usage/v9/fab/theming/css-shadow-parts/javascript.md b/static/usage/v9/fab/theming/css-shadow-parts/javascript.md
deleted file mode 100644
index cd18636cadc..00000000000
--- a/static/usage/v9/fab/theming/css-shadow-parts/javascript.md
+++ /dev/null
@@ -1,37 +0,0 @@
-```html
-<style>
-  ion-fab-button::part(native) {
-    background-color: #b7f399;
-    border-radius: 15px;
-    box-shadow:
-      0px 1px 2px 0px rgba(0, 0, 0, 0.3),
-      0px 1px 3px 1px rgba(0, 0, 0, 0.15);
-    color: black;
-  }
-
-  ion-fab-button::part(native):hover::after {
-    background-color: #a3e681;
-  }
-
-  ion-fab-button::part(native):active::after {
-    background-color: #87d361;
-  }
-</style>
-
-<ion-fab>
-  <ion-fab-button>
-    <ion-icon name="add"></ion-icon>
-  </ion-fab-button>
-  <ion-fab-list side="end">
-    <ion-fab-button>
-      <ion-icon name="document"></ion-icon>
-    </ion-fab-button>
-    <ion-fab-button>
-      <ion-icon name="color-palette"></ion-icon>
-    </ion-fab-button>
-    <ion-fab-button>
-      <ion-icon name="globe"></ion-icon>
-    </ion-fab-button>
-  </ion-fab-list>
-</ion-fab>
-```
diff --git a/static/usage/v9/reorder/custom-icon/javascript.md b/static/usage/v9/reorder/custom-icon/javascript.md
deleted file mode 100644
index 8535da7544a..00000000000
--- a/static/usage/v9/reorder/custom-icon/javascript.md
+++ /dev/null
@@ -1,56 +0,0 @@
-```html
-<ion-list>
-  <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
-  <ion-reorder-group disabled="false">
-    <ion-item>
-      <ion-label> Item 1 </ion-label>
-      <ion-reorder slot="end">
-        <ion-icon name="pizza"></ion-icon>
-      </ion-reorder>
-    </ion-item>
-
-    <ion-item>
-      <ion-label> Item 2 </ion-label>
-      <ion-reorder slot="end">
-        <ion-icon name="pizza"></ion-icon>
-      </ion-reorder>
-    </ion-item>
-
-    <ion-item>
-      <ion-label> Item 3 </ion-label>
-      <ion-reorder slot="end">
-        <ion-icon name="pizza"></ion-icon>
-      </ion-reorder>
-    </ion-item>
-
-    <ion-item>
-      <ion-label> Item 4 </ion-label>
-      <ion-reorder slot="end">
-        <ion-icon name="pizza"></ion-icon>
-      </ion-reorder>
-    </ion-item>
-
-    <ion-item>
-      <ion-label> Item 5 </ion-label>
-      <ion-reorder slot="end">
-        <ion-icon name="pizza"></ion-icon>
-      </ion-reorder>
-    </ion-item>
-  </ion-reorder-group>
-</ion-list>
-
-<script>
-  const reorderGroup = document.querySelector('ion-reorder-group');
-
-  reorderGroup.addEventListener('ionReorderEnd', ({ detail }) => {
-    // The `from` and `to` properties contain the index of the item
-    // when the drag started and ended, respectively
-    console.log('Dragged from index', detail.from, 'to', detail.to);
-
-    // Finish the reorder and position the item in the DOM based on
-    // where the gesture ended. This method can also be called directly
-    // by the reorder group.
-    detail.complete();
-  });
-</script>
-```

From a0a67b269b8805f9dd1dba55f58e4e80031d5099 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Fri, 13 Nov 2026 12:50:13 -0500
Subject: [PATCH 2/2] style: add line breaks

---
 static/usage/v8/badge/inside-tab-bar/index.mdx | 1 +
 static/usage/v9/badge/inside-tab-bar/index.mdx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/static/usage/v8/badge/inside-tab-bar/index.mdx b/static/usage/v8/badge/inside-tab-bar/index.mdx
index 6ab7f81a3b5..f6cdf95a2d2 100644
--- a/static/usage/v8/badge/inside-tab-bar/index.mdx
+++ b/static/usage/v8/badge/inside-tab-bar/index.mdx
@@ -2,6 +2,7 @@ import Playground from '@site/src/components/global/Playground';
 
 import javascript_index_html from './javascript/index_html.md';
 import javascript_index_ts from './javascript/index_ts.md';
+
 import react from './react.md';
 import vue from './vue.md';
 
diff --git a/static/usage/v9/badge/inside-tab-bar/index.mdx b/static/usage/v9/badge/inside-tab-bar/index.mdx
index bcfb30032c7..671e4e9bfed 100644
--- a/static/usage/v9/badge/inside-tab-bar/index.mdx
+++ b/static/usage/v9/badge/inside-tab-bar/index.mdx
@@ -2,6 +2,7 @@ import Playground from '@site/src/components/global/Playground';
 
 import javascript_index_html from './javascript/index_html.md';
 import javascript_index_ts from './javascript/index_ts.md';
+
 import react from './react.md';
 import vue from './vue.md';