fix(select): chevron icon is now an ionicon (#26484)

BREAKING CHANGE:

The `icon` CSS Shadow Part for `ion-select` now targets an `ion-icon` component.

BREAKING.md

@@ -203,6 +203,8 @@ Ionic now listens on the `keydown` event instead of the `keyup` event when deter
 
 - `ionChange` is no longer emitted when the `value` of `ion-select` is modified externally. `ionChange` is only emitted from user committed changes, such as confirming a selected option in the select's overlay.
 
+- The `icon` CSS Shadow Part now targets an `ion-icon` component.
+
 <h4 id="version-7x-slides">Slides</h4>
 
 `ion-slides`, `ion-slide`, and the `IonicSwiper` plugin have been removed from Ionic.

core/src/components/select/select.ios.scss

@@ -12,8 +12,5 @@
 }
 
 .select-icon {
-  width: 12px;
-  height: 18px;
-
   opacity: .33;
 }

core/src/components/select/select.md.scss

@@ -12,9 +12,6 @@
 }
 
 .select-icon {
-  width: 19px;
-  height: 19px;
-
   transition: transform .15s cubic-bezier(.4, 0, .2, 1);
 
   opacity: .55;

core/src/components/select/select.scss

@@ -65,7 +65,11 @@ button {
 }
 
 .select-icon {
+  @include margin(0, 0, 0, 4px);
+
   position: relative;
+
+  width: 13px;
 }
 
 .select-text {
@@ -81,21 +85,3 @@ button {
 
   overflow: hidden;
 }
-
-.select-icon-inner {
-  @include position(50%, null, null, 5px);
-  @include margin(-2px, null, null, null);
-
-  position: absolute;
-
-  width: 0;
-  height: 0;
-
-  border-top: 5px solid;
-  border-right: 5px solid transparent;
-  border-left: 5px solid transparent;
-
-  color: currentColor;
-
-  pointer-events: none;
-}

core/src/components/select/select.tsx

@@ -1,5 +1,6 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
+import { caretDownSharp } from 'ionicons/icons';
 
 import { getIonMode } from '../../global/ionic-global';
 import type {
@@ -591,9 +592,7 @@ export class Select implements ComponentInterface {
         <div aria-hidden="true" class={selectTextClasses} part={textPart}>
           {selectText}
         </div>
-        <div class="select-icon" role="presentation" part="icon">
-          <div class="select-icon-inner"></div>
-        </div>
+        <ion-icon class="select-icon" part="icon" aria-hidden="true" icon={caretDownSharp}></ion-icon>
         <label id={labelId}>{displayLabel}</label>
         <button
           type="button"