From 95e28b6629843af7dce62f20bc8e31adfb391990 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Tue, 20 Jun 2023 12:18:36 -0500
Subject: [PATCH] feat(select): add props to customize toggle icons (#27648)

Issue number: resolves #17248

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

While the `icon` shadow part allows customization of the existing toggle
icon, developers do not have a way to specify a different icon to use
entirely.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

New props `toggleIcon` and `expandedIcon` added. (Design docs are
[here](https://github.com/ionic-team/ionic-framework-design-documents/blob/main/projects/ionic-framework/components/select/0002-custom-icons.md)
and
[here](https://github.com/ionic-team/ionic-framework-design-documents/blob/main/projects/ionic-framework/components/select/0003-custom-icon-on-open.md)
respectively.)

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Docs PR: https://github.com/ionic-team/ionic-docs/pull/2996
Dev build: `7.0.15-dev.11687278023.161b97d8`

---------

Co-authored-by: ionitron <hi@ionicframework.com>
---
 angular/src/directives/proxies.ts             |   4 +-
 core/api.txt                                  |   2 +
 core/src/components.d.ts                      |  16 +++++
 core/src/components/select/select.md.scss     |   8 +--
 core/src/components/select/select.tsx         |  31 +++++++++-
 .../select/test/toggle-icon/index.html        |  58 ++++++++++++++++++
 .../select/test/toggle-icon/select.e2e.ts     |  39 ++++++++++++
 ...panded-icon-md-ltr-Mobile-Chrome-linux.png | Bin 0 -> 3096 bytes
 ...anded-icon-md-ltr-Mobile-Firefox-linux.png | Bin 0 -> 3616 bytes
 ...panded-icon-md-ltr-Mobile-Safari-linux.png | Bin 0 -> 2678 bytes
 ...toggle-icon-md-ltr-Mobile-Chrome-linux.png | Bin 0 -> 2322 bytes
 ...oggle-icon-md-ltr-Mobile-Firefox-linux.png | Bin 0 -> 2566 bytes
 ...toggle-icon-md-ltr-Mobile-Safari-linux.png | Bin 0 -> 2008 bytes
 packages/vue/src/proxies.ts                   |   2 +
 14 files changed, 151 insertions(+), 9 deletions(-)
 create mode 100644 core/src/components/select/test/toggle-icon/index.html
 create mode 100644 core/src/components/select/test/toggle-icon/select.e2e.ts
 create mode 100644 core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-expanded-icon-md-ltr-Mobile-Chrome-linux.png
 create mode 100644 core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-expanded-icon-md-ltr-Mobile-Firefox-linux.png
 create mode 100644 core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-expanded-icon-md-ltr-Mobile-Safari-linux.png
 create mode 100644 core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-toggle-icon-md-ltr-Mobile-Chrome-linux.png
 create mode 100644 core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-toggle-icon-md-ltr-Mobile-Firefox-linux.png
 create mode 100644 core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-toggle-icon-md-ltr-Mobile-Safari-linux.png

diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
index c7bc83527c..5636f510b2 100644
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -1954,7 +1954,7 @@ export declare interface IonSegmentButton extends Components.IonSegmentButton {}
 
 
 @ProxyCmp({
-  inputs: ['cancelText', 'color', 'compareWith', 'disabled', 'fill', 'interface', 'interfaceOptions', 'justify', 'label', 'labelPlacement', 'legacy', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'shape', 'value'],
+  inputs: ['cancelText', 'color', 'compareWith', 'disabled', 'expandedIcon', 'fill', 'interface', 'interfaceOptions', 'justify', 'label', 'labelPlacement', 'legacy', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'shape', 'toggleIcon', 'value'],
   methods: ['open']
 })
 @Component({
@@ -1962,7 +1962,7 @@ export declare interface IonSegmentButton extends Components.IonSegmentButton {}
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['cancelText', 'color', 'compareWith', 'disabled', 'fill', 'interface', 'interfaceOptions', 'justify', 'label', 'labelPlacement', 'legacy', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'shape', 'value'],
+  inputs: ['cancelText', 'color', 'compareWith', 'disabled', 'expandedIcon', 'fill', 'interface', 'interfaceOptions', 'justify', 'label', 'labelPlacement', 'legacy', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'shape', 'toggleIcon', 'value'],
 })
 export class IonSelect {
   protected el: HTMLElement;
diff --git a/core/api.txt b/core/api.txt
index 04df06ad12..eecee0c71f 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -1238,6 +1238,7 @@ ion-select,prop,cancelText,string,'Cancel',false,false
 ion-select,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-select,prop,compareWith,((currentValue: any, compareValue: any) => boolean) | null | string | undefined,undefined,false,false
 ion-select,prop,disabled,boolean,false,false,false
+ion-select,prop,expandedIcon,string | undefined,undefined,false,false
 ion-select,prop,fill,"outline" | "solid" | undefined,undefined,false,false
 ion-select,prop,interface,"action-sheet" | "alert" | "popover",'alert',false,false
 ion-select,prop,interfaceOptions,any,{},false,false
@@ -1252,6 +1253,7 @@ ion-select,prop,okText,string,'OK',false,false
 ion-select,prop,placeholder,string | undefined,undefined,false,false
 ion-select,prop,selectedText,null | string | undefined,undefined,false,false
 ion-select,prop,shape,"round" | undefined,undefined,false,false
+ion-select,prop,toggleIcon,string | undefined,undefined,false,false
 ion-select,prop,value,any,undefined,false,false
 ion-select,method,open,open(event?: UIEvent) => Promise<any>
 ion-select,event,ionBlur,void,true
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index b65f10b179..a85b7cfcfb 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -2681,6 +2681,10 @@ export namespace Components {
           * If `true`, the user cannot interact with the select.
          */
         "disabled": boolean;
+        /**
+          * The toggle icon to show when the select is open. If defined, the icon rotation behavior in `md` mode will be disabled. If undefined, `toggleIcon` will be used for when the select is both open and closed.
+         */
+        "expandedIcon"?: string;
         /**
           * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
          */
@@ -2742,6 +2746,10 @@ export namespace Components {
           * The shape of the select. If "round" it will have an increased border radius.
          */
         "shape"?: 'round';
+        /**
+          * The toggle icon to use. Defaults to `chevronExpand` for `ios` mode, or `caretDownSharp` for `md` mode.
+         */
+        "toggleIcon"?: string;
         /**
           * The value of the select.
          */
@@ -6755,6 +6763,10 @@ declare namespace LocalJSX {
           * If `true`, the user cannot interact with the select.
          */
         "disabled"?: boolean;
+        /**
+          * The toggle icon to show when the select is open. If defined, the icon rotation behavior in `md` mode will be disabled. If undefined, `toggleIcon` will be used for when the select is both open and closed.
+         */
+        "expandedIcon"?: string;
         /**
           * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
          */
@@ -6835,6 +6847,10 @@ declare namespace LocalJSX {
           * The shape of the select. If "round" it will have an increased border radius.
          */
         "shape"?: 'round';
+        /**
+          * The toggle icon to use. Defaults to `chevronExpand` for `ios` mode, or `caretDownSharp` for `md` mode.
+         */
+        "toggleIcon"?: string;
         /**
           * The value of the select.
          */
diff --git a/core/src/components/select/select.md.scss b/core/src/components/select/select.md.scss
index ffbd004520..fa7c621c40 100644
--- a/core/src/components/select/select.md.scss
+++ b/core/src/components/select/select.md.scss
@@ -94,7 +94,7 @@
  * when the select is activated.
  * This should only happen on MD.
  */
-:host(.select-expanded:not(.legacy-select)) .select-icon {
+:host(.select-expanded:not(.legacy-select):not(.has-expanded-icon)) .select-icon {
   @include transform(rotate(180deg));
 }
 
@@ -123,7 +123,7 @@
   @include transform(translate3d(0, -9px, 0));
 }
 
-:host-context(.item-has-focus) .select-icon {
+:host-context(.item-has-focus):host(:not(.has-expanded-icon)) .select-icon {
   @include transform(rotate(180deg));
 }
 
@@ -131,8 +131,8 @@
  * Ensure that the translation we did
  * above is preserved when we rotate the select icon.
  */
-:host-context(.item-has-focus.item-label-stacked) .select-icon,
-:host-context(.item-has-focus.item-label-floating:not(.item-fill-outline)) .select-icon {
+:host-context(.item-has-focus.item-label-stacked):host(:not(.has-expanded-icon)) .select-icon,
+:host-context(.item-has-focus.item-label-floating:not(.item-fill-outline)):host(:not(.has-expanded-icon)) .select-icon {
   @include transform(rotate(180deg), translate3d(0, -9px, 0));
 }
 
diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx
index 49999a24f2..639d8e22a3 100644
--- a/core/src/components/select/select.tsx
+++ b/core/src/components/select/select.tsx
@@ -183,6 +183,19 @@ export class Select implements ComponentInterface {
    */
   @Prop() selectedText?: string | null;
 
+  /**
+   * The toggle icon to use. Defaults to `chevronExpand` for `ios` mode,
+   * or `caretDownSharp` for `md` mode.
+   */
+  @Prop() toggleIcon?: string;
+
+  /**
+   * The toggle icon to show when the select is open. If defined, the icon
+   * rotation behavior in `md` mode will be disabled. If undefined, `toggleIcon`
+   * will be used for when the select is both open and closed.
+   */
+  @Prop() expandedIcon?: string;
+
   /**
    * The shape of the select. If "round" it will have an increased border radius.
    */
@@ -820,7 +833,8 @@ export class Select implements ComponentInterface {
   }
 
   private renderSelect() {
-    const { disabled, el, isExpanded, labelPlacement, justify, placeholder, fill, shape, name, value } = this;
+    const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value } =
+      this;
     const mode = getIonMode(this);
     const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked';
     const justifyEnabled = !hasFloatingOrStackedLabel;
@@ -839,6 +853,7 @@ export class Select implements ComponentInterface {
           'in-item-color': hostContext('ion-item.ion-color', el),
           'select-disabled': disabled,
           'select-expanded': isExpanded,
+          'has-expanded-icon': expandedIcon !== undefined,
           'has-value': this.hasValue(),
           'has-placeholder': placeholder !== undefined,
           'ion-focusable': true,
@@ -893,7 +908,7 @@ Developers can use the "legacy" property to continue using the legacy form marku
       this.hasLoggedDeprecationWarning = true;
     }
 
-    const { disabled, el, inputId, isExpanded, name, placeholder, value } = this;
+    const { disabled, el, inputId, isExpanded, expandedIcon, name, placeholder, value } = this;
     const mode = getIonMode(this);
     const { labelText, labelId } = getAriaLabel(el, inputId);
 
@@ -926,6 +941,7 @@ Developers can use the "legacy" property to continue using the legacy form marku
           'in-item-color': hostContext('ion-item.ion-color', el),
           'select-disabled': disabled,
           'select-expanded': isExpanded,
+          'has-expanded-icon': expandedIcon !== undefined,
           'legacy-select': true,
         }}
       >
@@ -974,7 +990,16 @@ Developers can use the "legacy" property to continue using the legacy form marku
    */
   private renderSelectIcon() {
     const mode = getIonMode(this);
-    const icon = mode === 'ios' ? chevronExpand : caretDownSharp;
+    const { isExpanded, toggleIcon, expandedIcon } = this;
+    let icon: string;
+
+    if (isExpanded && expandedIcon !== undefined) {
+      icon = expandedIcon;
+    } else {
+      const defaultIcon = mode === 'ios' ? chevronExpand : caretDownSharp;
+      icon = toggleIcon ?? defaultIcon;
+    }
+
     return <ion-icon class="select-icon" part="icon" aria-hidden="true" icon={icon}></ion-icon>;
   }
 
diff --git a/core/src/components/select/test/toggle-icon/index.html b/core/src/components/select/test/toggle-icon/index.html
new file mode 100644
index 0000000000..1c144416bb
--- /dev/null
+++ b/core/src/components/select/test/toggle-icon/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Select - toggleIcon</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Select - toggleIcon</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="test-content">
+        <ion-list>
+          <ion-item>
+            <ion-select label="toggleIcon" toggle-icon="arrow-down" placeholder="Select one" interface="popover">
+              <ion-select-option value="apples">Apples</ion-select-option>
+              <ion-select-option value="oranges">Oranges</ion-select-option>
+              <ion-select-option value="pears">Pears</ion-select-option>
+            </ion-select>
+          </ion-item>
+          <ion-item>
+            <ion-select label="expandedIcon" expanded-icon="arrow-up" placeholder="Select one" interface="popover">
+              <ion-select-option value="apples">Apples</ion-select-option>
+              <ion-select-option value="oranges">Oranges</ion-select-option>
+              <ion-select-option value="pears">Pears</ion-select-option>
+            </ion-select>
+          </ion-item>
+          <ion-item>
+            <ion-select
+              label="Both"
+              toggle-icon="arrow-down"
+              expanded-icon="pizza"
+              placeholder="Select one"
+              interface="popover"
+            >
+              <ion-select-option value="apples">Apples</ion-select-option>
+              <ion-select-option value="oranges">Oranges</ion-select-option>
+              <ion-select-option value="pears">Pears</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/core/src/components/select/test/toggle-icon/select.e2e.ts b/core/src/components/select/test/toggle-icon/select.e2e.ts
new file mode 100644
index 0000000000..c956429358
--- /dev/null
+++ b/core/src/components/select/test/toggle-icon/select.e2e.ts
@@ -0,0 +1,39 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('select: toggleIcon'), () => {
+    test('should render a custom toggleIcon', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-select toggle-icon="pizza" label="Select" value="a">
+            <ion-select-option value="a">Apple</ion-select-option>
+          </ion-select>
+        `,
+        config
+      );
+
+      const select = page.locator('ion-select');
+      await expect(select).toHaveScreenshot(screenshot(`select-toggle-icon`));
+    });
+
+    test('should render a custom expandedIcon', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-select expanded-icon="pizza" interface="popover" label="Select" value="a">
+            <ion-select-option value="a">Apple</ion-select-option>
+          </ion-select>
+        `,
+        config
+      );
+
+      const select = page.locator('ion-select');
+      const popoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+
+      await select.click();
+      await popoverDidPresent.next();
+
+      await expect(select).toHaveScreenshot(screenshot(`select-expanded-icon`));
+    });
+  });
+});
diff --git a/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-expanded-icon-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-expanded-icon-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..beb10c25931fdf303aa9464aa755efad33e06a29
GIT binary patch
literal 3096
zcmb`Ji8qvS7ssDLmJu4pjK<oS5ZMXYqOm0!B|^r8GFgi(g%}khTb7V1MAmF&ExW9h
z7;6%PNMoB(#u~lP`~D5@InQ~PbME=w-@VWG`?<eZoV6Jr6a@tUfX~7ldl3L2vEaKl
zHz#=K*5jA}ACQ2HX2w9p7cn{j@D5pEjch}nuTDjrhkKy7n2eLWal#yqq*QsXt}9N>
zLYk3XnnhQeuUcu?Dwn_ZP|VCKd|Fp>(|g1&AxkKW=x<~3nl1fX)~@u;__}e_ajN_(
z3Ih|Zi8?gCDh%yC+GG;6_0Dk2AvoiiGxG>)bI$@F9Q1QyBG{d_H5=}6!v>2zgT=mT
zR~ZqOLg&$xWO&f%p)QOO7W+OELnfOeQ#oKTx@(FQ8tr^u5R8noh$55ks9GF>CI3Hy
z)k=Bw_4T!bRz#MTm#=A{uAQPJQz(;_FZwf8+1+{)yJkPca5d#&v8{o%wYA%`F_Km8
zeJL@U671B0gL*FQE$LemoHgG$Pd7$B6p>OzWTrsp-GRc;iFN?UP<H9=j1{uM;UX(r
z4^T1u;vHoU)lYJAk{W{<{JkW7a#j|~`+Eb7KgO+h=?r$nzOs1}m9FFreLZ@5<T5pI
z#%boAAYs^M=Ho!NyUOju1PvfiD>5)9vNauuVTeaT04OgnOj!6)&i!4U%a<=#IhJb&
z{5;&UyQJVf^**qdzp${7lXA)jY+oL&Nx{Bi=I_oQa|;V22Zsrqz1cWpjwFx{bRh`e
z7?2FnhFxB%xuZs51W29YX1si4=&%)18IQHGfe8u<HtBxs@9+9EV3-uJ_+_Wr$jppO
zUS581a4<4H{xBR4mohNG*Bif_TMg1R*qIml>U}C+(ojOV^{<*~0_xFJV{m?HDHNy*
zShPM*ImP$qXTNCGKRI+B$=1#;S~e$4(65<=m=51^_NKLnOPj_seU%jzO{}f?9i5!k
z7cyKr+|}A$-$<#eSG%Y>?hY&eyDM0=F2}62jJ(Un43HgU#zlPoThjLJ&{j5?d_Kp(
zxjRWxIjGS&s-&_qBP|Vncd4YvedqT=N>-LUolf^(9#e$D`uh5kP2vzNotF3S9p~oe
z=IKQ_=?kASEKN<L^$xawxK>ZhKefjvmzAA_Nbw?-(q8BWbC!$3sJPpwU#Q*qEHcq_
zx4Ndb*22~{4Xk6g3nMFQ>FAhsK2yc$BqHurK|w5)nC92AQ|O|)zv@vd)+(pwmTw+F
z>80{!FEn39BP-(Oz2Q3eP(uV7ja0h&#7r{W*454J`ohPj{!1e#z%<Q4dR}8EpXme?
z-U$wlBb$eYHiB6`g)*9p9CmQ)sj?T+o0|0Ag>F@l$=}}vn8{c_ms7AS1Kpt?y2%aD
zfBhQNzjCkPyRQ~6uO<0+7t)0rxJe`)sh?Eb+1XJG-SlqFeDw;WO6i}wrQNw2^l5dn
z{<ymOB{g;RJ>k?BFBHMLHw?5W{V5d6a=4X~69sepc;7B-IdHPp5{qEK9jct?FF5I0
z%rOekuMJsc%eSYJG=a7a`ml|QOOh5XOi1=ZHWrVU7#be7ad4oE-v_nvTql6j#KeUB
z_%R!R!C(l}O?S1!ckfglvnt+xZC{yJQNjP(uH4w&9Rm<L$*`}rUdW%Hp9$R|ng}F?
z+`r94prPeuWrx*0zF_a&I}H#f-d-;*E$v_}kMGaDt*&m~pY2VSUhfw5%dM+Jl$V$9
zKem|wv+9T1)#r?Q4R8W+IS|JK_B*<y8fsguOQc^VTe^py?3-{m2oM_^`?cw=Itqni
zP6gABDJbwNH*W}Tu1<0R(+`}RLR8@<>*>FL`)g=wvP#2>w?(yl0bpoo=r2AaBO|83
zGGpmLg*fx*9F!!ffk3416%-U4>PeC`3ko__W~TsNDJdxgwP!dyel20x^TGwabq*l6
zq=Zg#MTv?+07Tp&&Ij#Ipt&^muG97p76i_CYcP9kXR60ZeQu;oBB5R5-?#|qGfz)X
z74ZLcc6I_x_qWn!iBeixNRTYukA)SEz+e#IYrUUjq17K++-X6kuzX8?K07ctI$AKH
zO8v07M_T^0i<=~O*j&GU{JFJk(8^bmxNgw4&tz+a;dI2maFN5=v>tXLQx6YWKuSiY
zyRk)C)${p#8YnBm(ntvo-qonDrZ%KJ9V`l9MGwWjjT|Ty4!b3`y-tffjts$k{I?yS
zkdTmR7-7IKp+`o#gi-x|xFzXFdyQ8>02!;ShrPY#8d_TURaJwc!&6hM;y<^c!nBDA
zo_s2KX~{FQ{{~}oXy_uS7LaAN<3`lB!KGj9<1EdiDmQTruZxS%+`r#K+t359l-tcO
zEX>aLrDo~|D*<f_{yVkLsyzlkW*pPh9R1(M(a$t)3dWmCXHh61j%UIXz73SFKh7h{
z#3OG2IoU|DH*C~oD882-9>!Tc5w8>QGq<>yTUc0_=<VHE>otzMcri*y);dJU?CMo9
zd^qbe9Eo&eOgC?{#$9ae?PEX>mO0f|j3=J$>gnkLYdSJn=kwu>ThHLwSaiNw(%g&S
z>GogLd`R0~2x#p79qlE<a`#-#&wODLS3q-q_uYCTz;d_}{Wk31{#HZSj#|2+6K87Q
zy#41J>S}6gO_!_z=6a9h4{)9ky}Ujw=0qeqHwL}T&26hZD<GWT9m@@J<Bk8qxwN!2
z0=O}vk53n<MdnKNfb0G)>)2%AUv9!QeBk|JA-A9eeab@)9H`FDU#qUMfBf``Iz7$b
zHf+?ozd3oO`bI*q`S9@Y15K~7+?pCVe+)b40|+nTWE)7QhoIW<^>HzegSExv<mEdK
z_V=h@XlABJ8NL}MddfR8Pp%<gk>B6n9|yJtr0e>!!NG+VNkQ7;z2&n$($HYg*d58z
zW`p0qm+7pwT>pdsTbW-{!gHzcypf$9!gsnU_S-i{pbezi?U^=6XIB>l=uQwts&#vx
za$EWOMmvNl1za#}3|e&z1LyItwYBIxx&O-SoTX)QTH1WM<;>^!-KJ(sBf7;5>)n|S
z^91enn=GXa-k?TtnbbbNMUogl*GiDCX_7>OO}^=)ze$IMX``c$($f*IUcG8_SKILk
zXq;-e`$tAlNC+k_F8;gOoPzJEd@2`JE}h4fnw15O>x!D2bFHbb&o3(C0>{XHBK61Q
zKq=3m1{!@Y=%9V<kWy&ti~#eww}h7O)!vU-GqccvhAorgZLsot%Hq84Dk8hKvP0wJ
z9Iz!DFG=i3Fgm-$k>yLQpWHvA>UdrzwO%r?aq9izozXu+ElEpzo{FNHTgD%<{n!Sb
zHp35J<*!R5Z?Fo68D6eTD-KVm!z;gP1)~_twPSl-+)g`H2+#Q=CoOJ$izUw3+S^N?
zIC0`v**O>2C@SS5v`$Q$1#b|LiM^)u6`o?3LMD?Vsl@q(9_$A)xs86OW5NHX3{Nxm
zr5v<~5?xKOSHF3jJD<v(pDf9fH*0DG$C{cN+rYJ7e8F#76|0giT|jpjx}f-tt&k;K
zdMZXo`20-ssgu*}be7PHaK{sdT*p?SHX3yhRvC7YL1Mp0lYHr#B2rjWn8j8^8R2Nh
z7{LwLl#?zCJz~JqXq)Zj5`1;I#p5HGS^sy@dH1jyy;qg&D=SAK8+*`1Ob2d;+t@EL
zg&ZweTdweUZhURjZ;ihb1LLe&3&-UIfUDt0>efQ(3NsPv5{w3kpHWjsS9Sa0nHb-x
zqbpg0RKg|3Qyl!ioDEGhW_<C^P8I3iur__YtTTm$-)AezBF%&!O2uaKG$mW_SKWFa
zE2mc+F=D>VXeVAv;g)WZ<e&*~n+alPrI{aPXw-*xd4v=ZFpJMr1`SOnhVYE7)$a1j
z#Hzf~{5)?SC8xJhzprlbP$v;X?y!uQ)B~614s<vPdz3`*F}x)Xey;1^E;sN<k%B6d
zkZ+2YYeaG;G>EJ`qq(hW#DF0>`#KEpJrfqkd#mxg_I}c_5+xX4UhDoa-&u}aEbw^t
lJ_&+@1JGPKe?Q2!BzxMELD#nVdhn<ZSeRI2D~t(I{{dqz(%=99

literal 0
HcmV?d00001

diff --git a/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-expanded-icon-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-expanded-icon-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..fb9550dbb38b22467164d95338d8dcd69b88f4c7
GIT binary patch
literal 3616
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

literal 0
HcmV?d00001

diff --git a/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-expanded-icon-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-expanded-icon-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..e3592b3ddf001ac162450324041251f81f8764dd
GIT binary patch
literal 2678
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
THAk8mA4$LxVPjSe_lWx+-82J0

literal 0
HcmV?d00001

diff --git a/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-toggle-icon-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-toggle-icon-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..78512cad718e36e6974f757670a69c948d24718c
GIT binary patch
literal 2322
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

literal 0
HcmV?d00001

diff --git a/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-toggle-icon-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-toggle-icon-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..95155e5a6dfbafd54633761bb791aeb9bfc33c17
GIT binary patch
literal 2566
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
C>S6)_

literal 0
HcmV?d00001

diff --git a/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-toggle-icon-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-toggle-icon-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..f80cd24d983832d486c9ab1541822290849f182e
GIT binary patch
literal 2008
zcmcIl`8(8W8~@se88sn=EJLrDs7bbjQxj!uaT;4g9Q)8Qmds#KN0SH@QVeEf8%tT6
zEXR5rFS1N=!q5m~>SW1oM#TH=T-W;_yzlc|*K^<3{ljx_pU-_KJJ?^5mQs`g06-dJ
zW$`lr2ql8LF+>=AiB7#Dpb+=AxncqA|F{LMj7$KKNW)lM#75;UeZbgWn^cupxfTf3
z)jM3HMG=GE(}GB1MVHWS)7fef6fs8_T;sC-nZi=oWxQfda-n)A-W8Q(C`D1Wut?Ck
zBa?jen7UZbD~Po8+o^`e{r$MZzAM^onJvo!maJvc^10R&g8fycC|DO908GYrC!qi!
zP*Rr!v=Xd@fd^_Cz#a9Z<3IuAe`xC6S1)gCGuP1>=<CC%r(0aPvT&=}pc)2+rlh5D
zrg=gggr`(0Qcj9dS{nb|d0$ObUS3{YLIQ`wDJdx}%+FJ))QO3S#Kc7TBS+ZcO6Vl(
zk_Ra%P#Ek*S(z3Rsi>p`g+dn=7IrodR~Nr{k=nymfF-8o3Ik7bb8~|O16^HR%gW2Q
z*XtXYOzo^UiHYK^H`*H;|DK(#tEoYmn!4j~l~|-_OVmZkj4b+zwV$o6Egr8;c0;2R
z=ycEc_;?Qw4&759xOwcQbFjW*QDLFJqMg70Csi6}a8MV4=<MvA>AHV#WMt%Wk>hb0
zOv&)~9X@MlXo$s<B|h`j%P}NO4R~nEB!@>t_~|Ja{S0OXhkFqSsz;BGfB3N5)#p5~
zt*y;&i~HSGXNno@5*KHN_>;pi)74Fb&w>TW%WFBatPI3oD0<h+TT4w%1^;d!d<^H(
zXf!sP9Tpa*qM{NK5(4V}_0faFGQr~AL;2?;O+4`UFVoZ0Z{Io)2!w!u02><{(6TUA
zO<Ekk2tmNQii?ZK*=#2#C*4!0^!l+bF6&V(5ub+)3=L_<VQ4k@#>NH;R!`=C&Cbq#
zPsSp%($WTb{m;O{*4NcR5O#KUA|fJ9O-+=?4<A0fN;lV~9|8>j5D1LvtoFE_*L}X>
zw{Eo%mlRzxtV_1Gw)kH;3(Lzc<=9yB_JRVh!QmLRmt?*@!$C_^Q?t3bSx(B5Ox{^p
zsX;&gdwDrP3DSiUzdJKt>vQv%zn@<ui4-x0(~&=Yx>_KJ+A3k+oO=B$E-0vCGst;9
zhfXJjg`FdB>5v-kN*q)%i+S=(HYnlfw)pSg`VT4qqc$&{!SvG84<-I0BP$yh7uS@5
zMGp4%PTweHFn(`pswF>hvJOt{STk_dk!N1_aCOb5)2kh{kS9;lO`{8)D|O|elU|n~
zVMO9+5YxlM11!9OfdK-6NKQ`H%uI&sp-=^53q?gmcAA-ezEnE>QBqRW=6u$s|IHE_
z$bq|^p>w^5s@6fY1TnuIA?5=sEWAE-Wo1Pd_Zp7&_VM}HO75X))&J>zhR=U~>3(Tx
z=|;?V>c2)~5)!((t6PigvqnY%hPleh%0I>Lj*pDUs;CTcSI5Q8#}xlL*WKOS-Q03$
zw69!l5f<6g(<6z%U@)UboaV^N&Hk*Iw%Bbnq}IG-4RpG);>t@G>JX1!|71rZ@i!O7
zK!`{p!kgTW%Yb1eB_;6&Ws)gyJwwA!Ty8yW7>q(zPVTRX31qsJJ<Zh3+1Vd;G$A3O
z5!udQFe)nM|F{R8nwp}(ak$BA40|*3*5a2DhIL8!NU0s=aYjbQ^t9Jk#pe!zW}Vh%
ziwfg&b8~O5N&<WEw9A(uegB*p@!;U#_d(43d``xvckdk6zQ=oS{&1`ThxqET*FUpV
z&0;pT*8`f|hd%GO8qGpQg_+lvc)ZBfS<8@Hv9Woa3NcYp<MZd+Z||FHXx!CRfQhGD
z`Tp<->oPVmF*GnxHV(a`%o-TT%g!#VtgNrCMNm+%^{&Gr9n0M)+sMexsa7)KLu02j
zh*;XWh|=2HRlzEk^7zXaeAR|v)rUkP5p(Nel9{xE8nDqOCMMr@cEp4)1_qWz_HBX0
z)6mecw6p|q0L}x(2#?2OzIr7mCnqW)vA!L<WhC^mEv}x)T$-P^wzdYxS4wKC&dHMz
z;o%P+J@PC+fkeLXu9cIQuj}#1%F1d8;k@bZU+44bRO)b`{(%Drh(w~zloGH@Tv}S{
z?(Q}sOqs?CYFPXCC=@IfYin;0a;XAa@$9tcT9j!$I~F9}4u9FRDcthZGg-8=_Dcof
z^z`(f+#g*~Ln)@kwBFFn+}_@fbMawy^!NAs>E*cUJheK$v$Zr5#2mdp2Zq15w<r8t
z$K>SBaEVPsM8p99<NnLPx=^-`j_K9aAVFXd2smM94$N`6+-~nxu;;h;$RdE?93GFa
zs;bh=#P<o_SGwFo&&<sgW07_k3`m%;(9qDxNVD5}ru@tTC+h{+Z>rRsoOeOYvuDrR
z{5u+EZYH$*IXWgr^TdftYy}<ptLW|t;J>TsU<h#G(Bl7PU3unLad-|vh!SvB0~kwt
Kiz>8N!hZk>IIcMW

literal 0
HcmV?d00001

diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index 88a6bc0010..23131fb7bc 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -739,6 +739,8 @@ export const IonSelect = /*@__PURE__*/ defineContainer<JSX.IonSelect, JSX.IonSel
   'okText',
   'placeholder',
   'selectedText',
+  'toggleIcon',
+  'expandedIcon',
   'shape',
   'value',
   'ionChange',