From 0760bc02430245297cd659829586dd607860c52a Mon Sep 17 00:00:00 2001
From: amandaesmith333 <amandaesmith333@gmail.com>
Date: Wed, 14 Jun 2023 13:44:34 -0500
Subject: [PATCH 1/6] add playgrounds

---
 docs/api/select.md                            | 18 +++++++
 .../custom-toggle-icons/angular.md            | 11 ++++
 .../custom-toggle-icons/demo.html             | 30 +++++++++++
 .../custom-toggle-icons/index.md              | 13 +++++
 .../custom-toggle-icons/javascript.md         | 11 ++++
 .../custom-toggle-icons/react.md              | 18 +++++++
 .../customization/custom-toggle-icons/vue.md  | 22 ++++++++
 .../angular/example_component_css.md          | 13 +++++
 .../angular/example_component_html.md         | 18 +++++++
 .../angular/example_component_ts.md           | 10 ++++
 .../icon-flip-behavior/demo.html              | 51 +++++++++++++++++++
 .../customization/icon-flip-behavior/index.md | 34 +++++++++++++
 .../icon-flip-behavior/javascript.md          | 32 ++++++++++++
 .../icon-flip-behavior/react/main_css.md      | 13 +++++
 .../icon-flip-behavior/react/main_tsx.md      | 28 ++++++++++
 .../customization/icon-flip-behavior/vue.md   | 43 ++++++++++++++++
 16 files changed, 365 insertions(+)
 create mode 100644 static/usage/v7/select/customization/custom-toggle-icons/angular.md
 create mode 100644 static/usage/v7/select/customization/custom-toggle-icons/demo.html
 create mode 100644 static/usage/v7/select/customization/custom-toggle-icons/index.md
 create mode 100644 static/usage/v7/select/customization/custom-toggle-icons/javascript.md
 create mode 100644 static/usage/v7/select/customization/custom-toggle-icons/react.md
 create mode 100644 static/usage/v7/select/customization/custom-toggle-icons/vue.md
 create mode 100644 static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_css.md
 create mode 100644 static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_html.md
 create mode 100644 static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_ts.md
 create mode 100644 static/usage/v7/select/customization/icon-flip-behavior/demo.html
 create mode 100644 static/usage/v7/select/customization/icon-flip-behavior/index.md
 create mode 100644 static/usage/v7/select/customization/icon-flip-behavior/javascript.md
 create mode 100644 static/usage/v7/select/customization/icon-flip-behavior/react/main_css.md
 create mode 100644 static/usage/v7/select/customization/icon-flip-behavior/react/main_tsx.md
 create mode 100644 static/usage/v7/select/customization/icon-flip-behavior/vue.md

diff --git a/docs/api/select.md b/docs/api/select.md
index 2636e7d04bb..9c336ae37f4 100644
--- a/docs/api/select.md
+++ b/docs/api/select.md
@@ -180,6 +180,24 @@ Customizing the interface dialog should be done by following the Customization s
 
 However, the Select Option does set a class for easier styling and allows for the ability to pass a class to the overlay option, see the [Select Options documentation](select-option.md) for usage examples of customizing options.
 
+### Custom Toggle Icons
+
+The icon that displays next to the select text can be set to any [Ionicon](https://ionic.io/ionicons) using the `toggleIcon` and/or `toggleIconWhenOpen` properties.
+
+import CustomToggleIconsExample from '@site/static/usage/v7/select/customization/custom-toggle-icons/index.md';
+
+<CustomToggleIconsExample />
+
+### Icon Flip Behavior
+
+By default, when the select is open, the toggle icon will automatically rotate on `md` mode and remain static on `ios` mode. This behavior can be customized using CSS.
+
+The below example also uses a [custom `toggleIcon`](#custom-toggle-icons) to better demonstrate the flip behavior on `ios`, since the default icon is vertically symmetrical.
+
+import IconFlipBehaviorExample from '@site/static/usage/v7/select/customization/icon-flip-behavior/index.md';
+
+<IconFlipBehaviorExample />
+
 ## Typeahead Component
 
 Typeahead or autocomplete functionality can be built using existing Ionic components. We recommend using an `ion-modal` to make the best use of the available screen space.
diff --git a/static/usage/v7/select/customization/custom-toggle-icons/angular.md b/static/usage/v7/select/customization/custom-toggle-icons/angular.md
new file mode 100644
index 00000000000..9c06a09bdab
--- /dev/null
+++ b/static/usage/v7/select/customization/custom-toggle-icons/angular.md
@@ -0,0 +1,11 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select interface="popover" toggleIcon="add" toggleIconWhenOpen="remove" aria-label="fruit" placeholder="Select fruit">
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/select/customization/custom-toggle-icons/demo.html b/static/usage/v7/select/customization/custom-toggle-icons/demo.html
new file mode 100644
index 00000000000..e743ad209c4
--- /dev/null
+++ b/static/usage/v7/select/customization/custom-toggle-icons/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>Select - Custom Toggle Icons</title>
+    <link rel="stylesheet" href="../../../../common.css" />
+    <script src="../../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-select interface="popover" toggle-icon="add" toggle-icon-when-open="remove" aria-label="fruit" placeholder="Select fruit">
+                <ion-select-option value="apples">Apples</ion-select-option>
+                <ion-select-option value="oranges">Oranges</ion-select-option>
+                <ion-select-option value="bananas">Bananas</ion-select-option>
+              </ion-select>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/select/customization/custom-toggle-icons/index.md b/static/usage/v7/select/customization/custom-toggle-icons/index.md
new file mode 100644
index 00000000000..f36fc25b9e2
--- /dev/null
+++ b/static/usage/v7/select/customization/custom-toggle-icons/index.md
@@ -0,0 +1,13 @@
+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
+  version="7"
+  size="350px"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/select/customization/custom-toggle-icons/demo.html"
+/>
diff --git a/static/usage/v7/select/customization/custom-toggle-icons/javascript.md b/static/usage/v7/select/customization/custom-toggle-icons/javascript.md
new file mode 100644
index 00000000000..9d203201be9
--- /dev/null
+++ b/static/usage/v7/select/customization/custom-toggle-icons/javascript.md
@@ -0,0 +1,11 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select interface="popover" toggle-icon="add" toggle-icon-when-open="remove" aria-label="fruit" placeholder="Select fruit">
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/select/customization/custom-toggle-icons/react.md b/static/usage/v7/select/customization/custom-toggle-icons/react.md
new file mode 100644
index 00000000000..e423ec925c3
--- /dev/null
+++ b/static/usage/v7/select/customization/custom-toggle-icons/react.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react';
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonSelect interface="popover" toggleIcon="add" toggleIconWhenOpen="remove" aria-label="fruit" placeholder="Select fruit">
+          <IonSelectOption value="apples">Apples</IonSelectOption>
+          <IonSelectOption value="oranges">Oranges</IonSelectOption>
+          <IonSelectOption value="bananas">Bananas</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/select/customization/custom-toggle-icons/vue.md b/static/usage/v7/select/customization/custom-toggle-icons/vue.md
new file mode 100644
index 00000000000..47601fecd44
--- /dev/null
+++ b/static/usage/v7/select/customization/custom-toggle-icons/vue.md
@@ -0,0 +1,22 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-select interface="popover" toggle-icon="add" toggle-icon-when-open="remove" aria-label="fruit" placeholder="Select fruit">
+        <ion-select-option value="apples">Apples</ion-select-option>
+        <ion-select-option value="oranges">Oranges</ion-select-option>
+        <ion-select-option value="bananas">Bananas</ion-select-option>
+      </ion-select>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script>
+  import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonList, IonSelect, IonSelectOption },
+  });
+</script>
+```
diff --git a/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_css.md b/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_css.md
new file mode 100644
index 00000000000..29a768fc54a
--- /dev/null
+++ b/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_css.md
@@ -0,0 +1,13 @@
+```css
+ion-select.always-flip::part(icon) {
+  transition: transform .15s cubic-bezier(.4, 0, .2, 1);
+}
+
+ion-select.always-flip.select-expanded::part(icon) {
+  transform: rotate(180deg);
+}
+
+ion-select.never-flip::part(icon) {
+  transform: none;
+}
+```
diff --git a/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_html.md b/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_html.md
new file mode 100644
index 00000000000..65b2eba7b23
--- /dev/null
+++ b/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_html.md
@@ -0,0 +1,18 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select class="always-flip" toggleIcon="caret-down-sharp" interface="popover" label="Icon flips on both modes" placeholder="Select fruit">
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+  <ion-item>
+    <ion-select class="never-flip" toggleIcon="caret-down-sharp" interface="popover" label="Icon never flips" placeholder="Select fruit">
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_ts.md b/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_ts.md
new file mode 100644
index 00000000000..4db53a836a9
--- /dev/null
+++ b/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_ts.md
@@ -0,0 +1,10 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/select/customization/icon-flip-behavior/demo.html b/static/usage/v7/select/customization/icon-flip-behavior/demo.html
new file mode 100644
index 00000000000..518de10da8e
--- /dev/null
+++ b/static/usage/v7/select/customization/icon-flip-behavior/demo.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Select - Icon Flip Behavior</title>
+    <link rel="stylesheet" href="../../../../common.css" />
+    <script src="../../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+
+    <style>
+      ion-select.always-flip::part(icon) {
+        transition: transform .15s cubic-bezier(.4, 0, .2, 1);
+      }
+
+      ion-select.always-flip.select-expanded::part(icon) {
+        transform: rotate(180deg);
+      }
+
+      ion-select.never-flip::part(icon) {
+        transform: none;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-select class="always-flip" toggle-icon="caret-down-sharp" interface="popover" label="Icon flips on both modes" placeholder="Select fruit">
+                <ion-select-option value="apples">Apples</ion-select-option>
+                <ion-select-option value="oranges">Oranges</ion-select-option>
+                <ion-select-option value="bananas">Bananas</ion-select-option>
+              </ion-select>
+            </ion-item>
+            <ion-item>
+              <ion-select class="never-flip" toggle-icon="caret-down-sharp" interface="popover" label="Icon never flips" placeholder="Select fruit">
+                <ion-select-option value="apples">Apples</ion-select-option>
+                <ion-select-option value="oranges">Oranges</ion-select-option>
+                <ion-select-option value="bananas">Bananas</ion-select-option>
+              </ion-select>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/select/customization/icon-flip-behavior/index.md b/static/usage/v7/select/customization/icon-flip-behavior/index.md
new file mode 100644
index 00000000000..01371efba3c
--- /dev/null
+++ b/static/usage/v7/select/customization/icon-flip-behavior/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  size="350px"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/select/customization/icon-flip-behavior/demo.html"
+/>
diff --git a/static/usage/v7/select/customization/icon-flip-behavior/javascript.md b/static/usage/v7/select/customization/icon-flip-behavior/javascript.md
new file mode 100644
index 00000000000..9cc7a984b22
--- /dev/null
+++ b/static/usage/v7/select/customization/icon-flip-behavior/javascript.md
@@ -0,0 +1,32 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select class="always-flip" toggle-icon="caret-down-sharp" interface="popover" label="Icon flips on both modes" placeholder="Select fruit">
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+  <ion-item>
+    <ion-select class="never-flip" toggle-icon="caret-down-sharp" interface="popover" label="Icon never flips" placeholder="Select fruit">
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+
+<style>
+  ion-select.always-flip::part(icon) {
+    transition: transform .15s cubic-bezier(.4, 0, .2, 1);
+  }
+
+  ion-select.always-flip.select-expanded::part(icon) {
+    transform: rotate(180deg);
+  }
+
+  ion-select.never-flip::part(icon) {
+    transform: none;
+  }
+</style>
+```
diff --git a/static/usage/v7/select/customization/icon-flip-behavior/react/main_css.md b/static/usage/v7/select/customization/icon-flip-behavior/react/main_css.md
new file mode 100644
index 00000000000..29a768fc54a
--- /dev/null
+++ b/static/usage/v7/select/customization/icon-flip-behavior/react/main_css.md
@@ -0,0 +1,13 @@
+```css
+ion-select.always-flip::part(icon) {
+  transition: transform .15s cubic-bezier(.4, 0, .2, 1);
+}
+
+ion-select.always-flip.select-expanded::part(icon) {
+  transform: rotate(180deg);
+}
+
+ion-select.never-flip::part(icon) {
+  transform: none;
+}
+```
diff --git a/static/usage/v7/select/customization/icon-flip-behavior/react/main_tsx.md b/static/usage/v7/select/customization/icon-flip-behavior/react/main_tsx.md
new file mode 100644
index 00000000000..d352279a9ca
--- /dev/null
+++ b/static/usage/v7/select/customization/icon-flip-behavior/react/main_tsx.md
@@ -0,0 +1,28 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonSelect className="always-flip" toggleIcon="caret-down-sharp" interface="popover" label="Icon flips on both modes" placeholder="Select fruit">
+          <IonSelectOption value="apples">Apples</IonSelectOption>
+          <IonSelectOption value="oranges">Oranges</IonSelectOption>
+          <IonSelectOption value="bananas">Bananas</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+      <IonItem>
+        <IonSelect className="never-flip" toggleIcon="caret-down-sharp" interface="popover" label="Icon never flips" placeholder="Select fruit">
+          <IonSelectOption value="apples">Apples</IonSelectOption>
+          <IonSelectOption value="oranges">Oranges</IonSelectOption>
+          <IonSelectOption value="bananas">Bananas</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/select/customization/icon-flip-behavior/vue.md b/static/usage/v7/select/customization/icon-flip-behavior/vue.md
new file mode 100644
index 00000000000..830c49e76cd
--- /dev/null
+++ b/static/usage/v7/select/customization/icon-flip-behavior/vue.md
@@ -0,0 +1,43 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-select class="always-flip" toggle-icon="caret-down-sharp" interface="popover" label="Icon flips on both modes" placeholder="Select fruit">
+        <ion-select-option value="apples">Apples</ion-select-option>
+        <ion-select-option value="oranges">Oranges</ion-select-option>
+        <ion-select-option value="bananas">Bananas</ion-select-option>
+      </ion-select>
+    </ion-item>
+    <ion-item>
+      <ion-select class="never-flip" toggle-icon="caret-down-sharp" interface="popover" label="Icon never flips" placeholder="Select fruit">
+        <ion-select-option value="apples">Apples</ion-select-option>
+        <ion-select-option value="oranges">Oranges</ion-select-option>
+        <ion-select-option value="bananas">Bananas</ion-select-option>
+      </ion-select>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script>
+  import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonList, IonSelect, IonSelectOption },
+  });
+</script>
+
+<style>
+  ion-select.always-flip::part(icon) {
+    transition: transform .15s cubic-bezier(.4, 0, .2, 1);
+  }
+
+  ion-select.always-flip.select-expanded::part(icon) {
+    transform: rotate(180deg);
+  }
+
+  ion-select.never-flip::part(icon) {
+    transform: none;
+  }
+</style>
+```

From 19e8ed28a3904acbbf0e570991fe45d0c685ab21 Mon Sep 17 00:00:00 2001
From: amandaesmith333 <amandaesmith333@gmail.com>
Date: Wed, 14 Jun 2023 13:46:13 -0500
Subject: [PATCH 2/6] lint

---
 .../custom-toggle-icons/angular.md             |  8 +++++++-
 .../custom-toggle-icons/demo.html              |  8 +++++++-
 .../custom-toggle-icons/javascript.md          |  8 +++++++-
 .../customization/custom-toggle-icons/react.md |  8 +++++++-
 .../customization/custom-toggle-icons/vue.md   |  8 +++++++-
 .../angular/example_component_css.md           |  2 +-
 .../angular/example_component_html.md          | 16 ++++++++++++++--
 .../customization/icon-flip-behavior/demo.html | 18 +++++++++++++++---
 .../icon-flip-behavior/javascript.md           | 18 +++++++++++++++---
 .../icon-flip-behavior/react/main_css.md       |  2 +-
 .../icon-flip-behavior/react/main_tsx.md       | 16 ++++++++++++++--
 .../customization/icon-flip-behavior/vue.md    | 18 +++++++++++++++---
 12 files changed, 110 insertions(+), 20 deletions(-)

diff --git a/static/usage/v7/select/customization/custom-toggle-icons/angular.md b/static/usage/v7/select/customization/custom-toggle-icons/angular.md
index 9c06a09bdab..2b96cb06c76 100644
--- a/static/usage/v7/select/customization/custom-toggle-icons/angular.md
+++ b/static/usage/v7/select/customization/custom-toggle-icons/angular.md
@@ -1,7 +1,13 @@
 ```html
 <ion-list>
   <ion-item>
-    <ion-select interface="popover" toggleIcon="add" toggleIconWhenOpen="remove" aria-label="fruit" placeholder="Select fruit">
+    <ion-select
+      interface="popover"
+      toggleIcon="add"
+      toggleIconWhenOpen="remove"
+      aria-label="fruit"
+      placeholder="Select fruit"
+    >
       <ion-select-option value="apples">Apples</ion-select-option>
       <ion-select-option value="oranges">Oranges</ion-select-option>
       <ion-select-option value="bananas">Bananas</ion-select-option>
diff --git a/static/usage/v7/select/customization/custom-toggle-icons/demo.html b/static/usage/v7/select/customization/custom-toggle-icons/demo.html
index e743ad209c4..065b5bb58c0 100644
--- a/static/usage/v7/select/customization/custom-toggle-icons/demo.html
+++ b/static/usage/v7/select/customization/custom-toggle-icons/demo.html
@@ -16,7 +16,13 @@
         <div class="container">
           <ion-list>
             <ion-item>
-              <ion-select interface="popover" toggle-icon="add" toggle-icon-when-open="remove" aria-label="fruit" placeholder="Select fruit">
+              <ion-select
+                interface="popover"
+                toggle-icon="add"
+                toggle-icon-when-open="remove"
+                aria-label="fruit"
+                placeholder="Select fruit"
+              >
                 <ion-select-option value="apples">Apples</ion-select-option>
                 <ion-select-option value="oranges">Oranges</ion-select-option>
                 <ion-select-option value="bananas">Bananas</ion-select-option>
diff --git a/static/usage/v7/select/customization/custom-toggle-icons/javascript.md b/static/usage/v7/select/customization/custom-toggle-icons/javascript.md
index 9d203201be9..55d1fba878f 100644
--- a/static/usage/v7/select/customization/custom-toggle-icons/javascript.md
+++ b/static/usage/v7/select/customization/custom-toggle-icons/javascript.md
@@ -1,7 +1,13 @@
 ```html
 <ion-list>
   <ion-item>
-    <ion-select interface="popover" toggle-icon="add" toggle-icon-when-open="remove" aria-label="fruit" placeholder="Select fruit">
+    <ion-select
+      interface="popover"
+      toggle-icon="add"
+      toggle-icon-when-open="remove"
+      aria-label="fruit"
+      placeholder="Select fruit"
+    >
       <ion-select-option value="apples">Apples</ion-select-option>
       <ion-select-option value="oranges">Oranges</ion-select-option>
       <ion-select-option value="bananas">Bananas</ion-select-option>
diff --git a/static/usage/v7/select/customization/custom-toggle-icons/react.md b/static/usage/v7/select/customization/custom-toggle-icons/react.md
index e423ec925c3..e324650e88b 100644
--- a/static/usage/v7/select/customization/custom-toggle-icons/react.md
+++ b/static/usage/v7/select/customization/custom-toggle-icons/react.md
@@ -5,7 +5,13 @@ function Example() {
   return (
     <IonList>
       <IonItem>
-        <IonSelect interface="popover" toggleIcon="add" toggleIconWhenOpen="remove" aria-label="fruit" placeholder="Select fruit">
+        <IonSelect
+          interface="popover"
+          toggleIcon="add"
+          toggleIconWhenOpen="remove"
+          aria-label="fruit"
+          placeholder="Select fruit"
+        >
           <IonSelectOption value="apples">Apples</IonSelectOption>
           <IonSelectOption value="oranges">Oranges</IonSelectOption>
           <IonSelectOption value="bananas">Bananas</IonSelectOption>
diff --git a/static/usage/v7/select/customization/custom-toggle-icons/vue.md b/static/usage/v7/select/customization/custom-toggle-icons/vue.md
index 47601fecd44..c0bcbd208e2 100644
--- a/static/usage/v7/select/customization/custom-toggle-icons/vue.md
+++ b/static/usage/v7/select/customization/custom-toggle-icons/vue.md
@@ -2,7 +2,13 @@
 <template>
   <ion-list>
     <ion-item>
-      <ion-select interface="popover" toggle-icon="add" toggle-icon-when-open="remove" aria-label="fruit" placeholder="Select fruit">
+      <ion-select
+        interface="popover"
+        toggle-icon="add"
+        toggle-icon-when-open="remove"
+        aria-label="fruit"
+        placeholder="Select fruit"
+      >
         <ion-select-option value="apples">Apples</ion-select-option>
         <ion-select-option value="oranges">Oranges</ion-select-option>
         <ion-select-option value="bananas">Bananas</ion-select-option>
diff --git a/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_css.md b/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_css.md
index 29a768fc54a..b031a2d4851 100644
--- a/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_css.md
+++ b/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_css.md
@@ -1,6 +1,6 @@
 ```css
 ion-select.always-flip::part(icon) {
-  transition: transform .15s cubic-bezier(.4, 0, .2, 1);
+  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 ion-select.always-flip.select-expanded::part(icon) {
diff --git a/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_html.md b/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_html.md
index 65b2eba7b23..5f40703296c 100644
--- a/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_html.md
+++ b/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_html.md
@@ -1,14 +1,26 @@
 ```html
 <ion-list>
   <ion-item>
-    <ion-select class="always-flip" toggleIcon="caret-down-sharp" interface="popover" label="Icon flips on both modes" placeholder="Select fruit">
+    <ion-select
+      class="always-flip"
+      toggleIcon="caret-down-sharp"
+      interface="popover"
+      label="Icon flips on both modes"
+      placeholder="Select fruit"
+    >
       <ion-select-option value="apples">Apples</ion-select-option>
       <ion-select-option value="oranges">Oranges</ion-select-option>
       <ion-select-option value="bananas">Bananas</ion-select-option>
     </ion-select>
   </ion-item>
   <ion-item>
-    <ion-select class="never-flip" toggleIcon="caret-down-sharp" interface="popover" label="Icon never flips" placeholder="Select fruit">
+    <ion-select
+      class="never-flip"
+      toggleIcon="caret-down-sharp"
+      interface="popover"
+      label="Icon never flips"
+      placeholder="Select fruit"
+    >
       <ion-select-option value="apples">Apples</ion-select-option>
       <ion-select-option value="oranges">Oranges</ion-select-option>
       <ion-select-option value="bananas">Bananas</ion-select-option>
diff --git a/static/usage/v7/select/customization/icon-flip-behavior/demo.html b/static/usage/v7/select/customization/icon-flip-behavior/demo.html
index 518de10da8e..f3e6738fe3e 100644
--- a/static/usage/v7/select/customization/icon-flip-behavior/demo.html
+++ b/static/usage/v7/select/customization/icon-flip-behavior/demo.html
@@ -11,7 +11,7 @@
 
     <style>
       ion-select.always-flip::part(icon) {
-        transition: transform .15s cubic-bezier(.4, 0, .2, 1);
+        transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
       }
 
       ion-select.always-flip.select-expanded::part(icon) {
@@ -30,14 +30,26 @@
         <div class="container">
           <ion-list>
             <ion-item>
-              <ion-select class="always-flip" toggle-icon="caret-down-sharp" interface="popover" label="Icon flips on both modes" placeholder="Select fruit">
+              <ion-select
+                class="always-flip"
+                toggle-icon="caret-down-sharp"
+                interface="popover"
+                label="Icon flips on both modes"
+                placeholder="Select fruit"
+              >
                 <ion-select-option value="apples">Apples</ion-select-option>
                 <ion-select-option value="oranges">Oranges</ion-select-option>
                 <ion-select-option value="bananas">Bananas</ion-select-option>
               </ion-select>
             </ion-item>
             <ion-item>
-              <ion-select class="never-flip" toggle-icon="caret-down-sharp" interface="popover" label="Icon never flips" placeholder="Select fruit">
+              <ion-select
+                class="never-flip"
+                toggle-icon="caret-down-sharp"
+                interface="popover"
+                label="Icon never flips"
+                placeholder="Select fruit"
+              >
                 <ion-select-option value="apples">Apples</ion-select-option>
                 <ion-select-option value="oranges">Oranges</ion-select-option>
                 <ion-select-option value="bananas">Bananas</ion-select-option>
diff --git a/static/usage/v7/select/customization/icon-flip-behavior/javascript.md b/static/usage/v7/select/customization/icon-flip-behavior/javascript.md
index 9cc7a984b22..de35559165f 100644
--- a/static/usage/v7/select/customization/icon-flip-behavior/javascript.md
+++ b/static/usage/v7/select/customization/icon-flip-behavior/javascript.md
@@ -1,14 +1,26 @@
 ```html
 <ion-list>
   <ion-item>
-    <ion-select class="always-flip" toggle-icon="caret-down-sharp" interface="popover" label="Icon flips on both modes" placeholder="Select fruit">
+    <ion-select
+      class="always-flip"
+      toggle-icon="caret-down-sharp"
+      interface="popover"
+      label="Icon flips on both modes"
+      placeholder="Select fruit"
+    >
       <ion-select-option value="apples">Apples</ion-select-option>
       <ion-select-option value="oranges">Oranges</ion-select-option>
       <ion-select-option value="bananas">Bananas</ion-select-option>
     </ion-select>
   </ion-item>
   <ion-item>
-    <ion-select class="never-flip" toggle-icon="caret-down-sharp" interface="popover" label="Icon never flips" placeholder="Select fruit">
+    <ion-select
+      class="never-flip"
+      toggle-icon="caret-down-sharp"
+      interface="popover"
+      label="Icon never flips"
+      placeholder="Select fruit"
+    >
       <ion-select-option value="apples">Apples</ion-select-option>
       <ion-select-option value="oranges">Oranges</ion-select-option>
       <ion-select-option value="bananas">Bananas</ion-select-option>
@@ -18,7 +30,7 @@
 
 <style>
   ion-select.always-flip::part(icon) {
-    transition: transform .15s cubic-bezier(.4, 0, .2, 1);
+    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
   ion-select.always-flip.select-expanded::part(icon) {
diff --git a/static/usage/v7/select/customization/icon-flip-behavior/react/main_css.md b/static/usage/v7/select/customization/icon-flip-behavior/react/main_css.md
index 29a768fc54a..b031a2d4851 100644
--- a/static/usage/v7/select/customization/icon-flip-behavior/react/main_css.md
+++ b/static/usage/v7/select/customization/icon-flip-behavior/react/main_css.md
@@ -1,6 +1,6 @@
 ```css
 ion-select.always-flip::part(icon) {
-  transition: transform .15s cubic-bezier(.4, 0, .2, 1);
+  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 ion-select.always-flip.select-expanded::part(icon) {
diff --git a/static/usage/v7/select/customization/icon-flip-behavior/react/main_tsx.md b/static/usage/v7/select/customization/icon-flip-behavior/react/main_tsx.md
index d352279a9ca..914d7a22d5c 100644
--- a/static/usage/v7/select/customization/icon-flip-behavior/react/main_tsx.md
+++ b/static/usage/v7/select/customization/icon-flip-behavior/react/main_tsx.md
@@ -8,14 +8,26 @@ function Example() {
   return (
     <IonList>
       <IonItem>
-        <IonSelect className="always-flip" toggleIcon="caret-down-sharp" interface="popover" label="Icon flips on both modes" placeholder="Select fruit">
+        <IonSelect
+          className="always-flip"
+          toggleIcon="caret-down-sharp"
+          interface="popover"
+          label="Icon flips on both modes"
+          placeholder="Select fruit"
+        >
           <IonSelectOption value="apples">Apples</IonSelectOption>
           <IonSelectOption value="oranges">Oranges</IonSelectOption>
           <IonSelectOption value="bananas">Bananas</IonSelectOption>
         </IonSelect>
       </IonItem>
       <IonItem>
-        <IonSelect className="never-flip" toggleIcon="caret-down-sharp" interface="popover" label="Icon never flips" placeholder="Select fruit">
+        <IonSelect
+          className="never-flip"
+          toggleIcon="caret-down-sharp"
+          interface="popover"
+          label="Icon never flips"
+          placeholder="Select fruit"
+        >
           <IonSelectOption value="apples">Apples</IonSelectOption>
           <IonSelectOption value="oranges">Oranges</IonSelectOption>
           <IonSelectOption value="bananas">Bananas</IonSelectOption>
diff --git a/static/usage/v7/select/customization/icon-flip-behavior/vue.md b/static/usage/v7/select/customization/icon-flip-behavior/vue.md
index 830c49e76cd..90d8bb03493 100644
--- a/static/usage/v7/select/customization/icon-flip-behavior/vue.md
+++ b/static/usage/v7/select/customization/icon-flip-behavior/vue.md
@@ -2,14 +2,26 @@
 <template>
   <ion-list>
     <ion-item>
-      <ion-select class="always-flip" toggle-icon="caret-down-sharp" interface="popover" label="Icon flips on both modes" placeholder="Select fruit">
+      <ion-select
+        class="always-flip"
+        toggle-icon="caret-down-sharp"
+        interface="popover"
+        label="Icon flips on both modes"
+        placeholder="Select fruit"
+      >
         <ion-select-option value="apples">Apples</ion-select-option>
         <ion-select-option value="oranges">Oranges</ion-select-option>
         <ion-select-option value="bananas">Bananas</ion-select-option>
       </ion-select>
     </ion-item>
     <ion-item>
-      <ion-select class="never-flip" toggle-icon="caret-down-sharp" interface="popover" label="Icon never flips" placeholder="Select fruit">
+      <ion-select
+        class="never-flip"
+        toggle-icon="caret-down-sharp"
+        interface="popover"
+        label="Icon never flips"
+        placeholder="Select fruit"
+      >
         <ion-select-option value="apples">Apples</ion-select-option>
         <ion-select-option value="oranges">Oranges</ion-select-option>
         <ion-select-option value="bananas">Bananas</ion-select-option>
@@ -29,7 +41,7 @@
 
 <style>
   ion-select.always-flip::part(icon) {
-    transition: transform .15s cubic-bezier(.4, 0, .2, 1);
+    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
   ion-select.always-flip.select-expanded::part(icon) {

From 10fbcec019831108ace2a9fb3277a6c738cda164 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Tue, 20 Jun 2023 09:49:47 -0500
Subject: [PATCH 3/6] Update
 static/usage/v7/select/customization/custom-toggle-icons/index.md

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
---
 .../usage/v7/select/customization/custom-toggle-icons/index.md  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/usage/v7/select/customization/custom-toggle-icons/index.md b/static/usage/v7/select/customization/custom-toggle-icons/index.md
index f36fc25b9e2..0617a54da77 100644
--- a/static/usage/v7/select/customization/custom-toggle-icons/index.md
+++ b/static/usage/v7/select/customization/custom-toggle-icons/index.md
@@ -7,7 +7,7 @@ import angular from './angular.md';
 
 <Playground
   version="7"
-  size="350px"
+  size="400px"
   code={{ javascript, react, vue, angular }}
   src="usage/v7/select/customization/custom-toggle-icons/demo.html"
 />

From cb4f65f7d459054f7b65ab6061ae966b51fc19b0 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Tue, 20 Jun 2023 09:51:02 -0500
Subject: [PATCH 4/6] Update
 static/usage/v7/select/customization/icon-flip-behavior/index.md

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
---
 .../usage/v7/select/customization/icon-flip-behavior/index.md   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/usage/v7/select/customization/icon-flip-behavior/index.md b/static/usage/v7/select/customization/icon-flip-behavior/index.md
index 01371efba3c..185f778569d 100644
--- a/static/usage/v7/select/customization/icon-flip-behavior/index.md
+++ b/static/usage/v7/select/customization/icon-flip-behavior/index.md
@@ -12,7 +12,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
-  size="350px"
+  size="400px"
   code={{
     javascript,
     react: {

From 35f3b82b5b254afec535eb6d95bf477583b68743 Mon Sep 17 00:00:00 2001
From: amandaesmith333 <amandaesmith333@gmail.com>
Date: Tue, 20 Jun 2023 10:20:59 -0500
Subject: [PATCH 5/6] fix icon usage for React and Vue

---
 .../v7/select/customization/custom-toggle-icons/react.md  | 6 ++++--
 .../v7/select/customization/custom-toggle-icons/vue.md    | 8 ++++++--
 .../customization/icon-flip-behavior/react/main_tsx.md    | 5 +++--
 .../v7/select/customization/icon-flip-behavior/vue.md     | 8 ++++++--
 4 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/static/usage/v7/select/customization/custom-toggle-icons/react.md b/static/usage/v7/select/customization/custom-toggle-icons/react.md
index e324650e88b..e1700aa3125 100644
--- a/static/usage/v7/select/customization/custom-toggle-icons/react.md
+++ b/static/usage/v7/select/customization/custom-toggle-icons/react.md
@@ -1,14 +1,16 @@
 ```tsx
 import React from 'react';
 import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react';
+import { add, remove } from 'ionicons/icons';
+
 function Example() {
   return (
     <IonList>
       <IonItem>
         <IonSelect
           interface="popover"
-          toggleIcon="add"
-          toggleIconWhenOpen="remove"
+          toggleIcon={add}
+          toggleIconWhenOpen={remove}
           aria-label="fruit"
           placeholder="Select fruit"
         >
diff --git a/static/usage/v7/select/customization/custom-toggle-icons/vue.md b/static/usage/v7/select/customization/custom-toggle-icons/vue.md
index c0bcbd208e2..79f3829c5d9 100644
--- a/static/usage/v7/select/customization/custom-toggle-icons/vue.md
+++ b/static/usage/v7/select/customization/custom-toggle-icons/vue.md
@@ -4,8 +4,8 @@
     <ion-item>
       <ion-select
         interface="popover"
-        toggle-icon="add"
-        toggle-icon-when-open="remove"
+        :toggle-icon="add"
+        :toggle-icon-when-open="remove"
         aria-label="fruit"
         placeholder="Select fruit"
       >
@@ -19,10 +19,14 @@
 
 <script>
   import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
+  import { add, remove } from 'ionicons/icons';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
     components: { IonItem, IonList, IonSelect, IonSelectOption },
+    setup() {
+      return { add, remove };
+    },
   });
 </script>
 ```
diff --git a/static/usage/v7/select/customization/icon-flip-behavior/react/main_tsx.md b/static/usage/v7/select/customization/icon-flip-behavior/react/main_tsx.md
index 914d7a22d5c..e7b146efcee 100644
--- a/static/usage/v7/select/customization/icon-flip-behavior/react/main_tsx.md
+++ b/static/usage/v7/select/customization/icon-flip-behavior/react/main_tsx.md
@@ -1,6 +1,7 @@
 ```tsx
 import React from 'react';
 import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react';
+import { caretDownSharp } from 'ionicons/icons';
 
 import './main.css';
 
@@ -10,7 +11,7 @@ function Example() {
       <IonItem>
         <IonSelect
           className="always-flip"
-          toggleIcon="caret-down-sharp"
+          toggleIcon={caretDownSharp}
           interface="popover"
           label="Icon flips on both modes"
           placeholder="Select fruit"
@@ -23,7 +24,7 @@ function Example() {
       <IonItem>
         <IonSelect
           className="never-flip"
-          toggleIcon="caret-down-sharp"
+          toggleIcon={caretDownSharp}
           interface="popover"
           label="Icon never flips"
           placeholder="Select fruit"
diff --git a/static/usage/v7/select/customization/icon-flip-behavior/vue.md b/static/usage/v7/select/customization/icon-flip-behavior/vue.md
index 90d8bb03493..f7d38a6ae7b 100644
--- a/static/usage/v7/select/customization/icon-flip-behavior/vue.md
+++ b/static/usage/v7/select/customization/icon-flip-behavior/vue.md
@@ -4,7 +4,7 @@
     <ion-item>
       <ion-select
         class="always-flip"
-        toggle-icon="caret-down-sharp"
+        :toggle-icon="caretDownSharp"
         interface="popover"
         label="Icon flips on both modes"
         placeholder="Select fruit"
@@ -17,7 +17,7 @@
     <ion-item>
       <ion-select
         class="never-flip"
-        toggle-icon="caret-down-sharp"
+        :toggle-icon="caretDownSharp"
         interface="popover"
         label="Icon never flips"
         placeholder="Select fruit"
@@ -32,10 +32,14 @@
 
 <script>
   import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
+  import { caretDownSharp } from 'ionicons/icons';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
     components: { IonItem, IonList, IonSelect, IonSelectOption },
+    setup() {
+      return { caretDownSharp };
+    },
   });
 </script>
 

From 6cc488695dd2758c3559d3312e7889c53f760579 Mon Sep 17 00:00:00 2001
From: amandaesmith333 <amandaesmith333@gmail.com>
Date: Tue, 20 Jun 2023 11:21:53 -0500
Subject: [PATCH 6/6] rename toggleIconWhenOpen to expandedIcon

---
 docs/api/select.md                                              | 2 +-
 .../v7/select/customization/custom-toggle-icons/angular.md      | 2 +-
 .../usage/v7/select/customization/custom-toggle-icons/demo.html | 2 +-
 .../v7/select/customization/custom-toggle-icons/javascript.md   | 2 +-
 .../usage/v7/select/customization/custom-toggle-icons/react.md  | 2 +-
 static/usage/v7/select/customization/custom-toggle-icons/vue.md | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/api/select.md b/docs/api/select.md
index 9c336ae37f4..a13b97165c8 100644
--- a/docs/api/select.md
+++ b/docs/api/select.md
@@ -182,7 +182,7 @@ However, the Select Option does set a class for easier styling and allows for th
 
 ### Custom Toggle Icons
 
-The icon that displays next to the select text can be set to any [Ionicon](https://ionic.io/ionicons) using the `toggleIcon` and/or `toggleIconWhenOpen` properties.
+The icon that displays next to the select text can be set to any [Ionicon](https://ionic.io/ionicons) using the `toggleIcon` and/or `expandedIcon` properties.
 
 import CustomToggleIconsExample from '@site/static/usage/v7/select/customization/custom-toggle-icons/index.md';
 
diff --git a/static/usage/v7/select/customization/custom-toggle-icons/angular.md b/static/usage/v7/select/customization/custom-toggle-icons/angular.md
index 2b96cb06c76..429435daa6a 100644
--- a/static/usage/v7/select/customization/custom-toggle-icons/angular.md
+++ b/static/usage/v7/select/customization/custom-toggle-icons/angular.md
@@ -4,7 +4,7 @@
     <ion-select
       interface="popover"
       toggleIcon="add"
-      toggleIconWhenOpen="remove"
+      expandedIcon="remove"
       aria-label="fruit"
       placeholder="Select fruit"
     >
diff --git a/static/usage/v7/select/customization/custom-toggle-icons/demo.html b/static/usage/v7/select/customization/custom-toggle-icons/demo.html
index 065b5bb58c0..1309854f3d5 100644
--- a/static/usage/v7/select/customization/custom-toggle-icons/demo.html
+++ b/static/usage/v7/select/customization/custom-toggle-icons/demo.html
@@ -19,7 +19,7 @@
               <ion-select
                 interface="popover"
                 toggle-icon="add"
-                toggle-icon-when-open="remove"
+                expanded-icon="remove"
                 aria-label="fruit"
                 placeholder="Select fruit"
               >
diff --git a/static/usage/v7/select/customization/custom-toggle-icons/javascript.md b/static/usage/v7/select/customization/custom-toggle-icons/javascript.md
index 55d1fba878f..fe874eaac26 100644
--- a/static/usage/v7/select/customization/custom-toggle-icons/javascript.md
+++ b/static/usage/v7/select/customization/custom-toggle-icons/javascript.md
@@ -4,7 +4,7 @@
     <ion-select
       interface="popover"
       toggle-icon="add"
-      toggle-icon-when-open="remove"
+      expanded-icon="remove"
       aria-label="fruit"
       placeholder="Select fruit"
     >
diff --git a/static/usage/v7/select/customization/custom-toggle-icons/react.md b/static/usage/v7/select/customization/custom-toggle-icons/react.md
index e1700aa3125..c7358752605 100644
--- a/static/usage/v7/select/customization/custom-toggle-icons/react.md
+++ b/static/usage/v7/select/customization/custom-toggle-icons/react.md
@@ -10,7 +10,7 @@ function Example() {
         <IonSelect
           interface="popover"
           toggleIcon={add}
-          toggleIconWhenOpen={remove}
+          expandedIcon={remove}
           aria-label="fruit"
           placeholder="Select fruit"
         >
diff --git a/static/usage/v7/select/customization/custom-toggle-icons/vue.md b/static/usage/v7/select/customization/custom-toggle-icons/vue.md
index 79f3829c5d9..4d748e1c2d9 100644
--- a/static/usage/v7/select/customization/custom-toggle-icons/vue.md
+++ b/static/usage/v7/select/customization/custom-toggle-icons/vue.md
@@ -5,7 +5,7 @@
       <ion-select
         interface="popover"
         :toggle-icon="add"
-        :toggle-icon-when-open="remove"
+        :expanded-icon="remove"
         aria-label="fruit"
         placeholder="Select fruit"
       >