feat(many): default components to Phosphor Icons for ionic theme (#29617)

Issue number: internal

---------

## What is the current behavior?
Icons in the Ionic theme default to Ionicons.

## What is the new behavior?
- Renames the following config properties:
  - `datetimeShowMonthYearIcon` to `datetimeExpandedIcon`
  - `datetimeHideMonthYearIcon` to `datetimeCollapsedIcon`
  - `selectExpandIcon` to `selectExpandedIcon`
- Updates the icons for the `ionic` theme to the following Phosphor
Icons:

| Component | Config | Phosphor Icon | Font Weight |
| ------------------------ | --------------------------- |
----------------- | ----------- |
| Accordion | `accordionToggleIcon` | `CaretDown` | `regular` |
| Back Button | `backButtonIcon` | `CaretLeft` | `regular` |
| Breadcrumb | `breadcrumbSeparatorIcon` | `CaretRight` | `regular` |
| Breadcrumb | `breadcrumbCollapsedIcon` | `DotsThree` | `regular` |
| Checkbox | N/A | `Check` | `bold` |
| Checkbox (indeterminate) | N/A | `Minus` | `bold` |
| Datetime | `datetimeNextIcon` | `CaretRight` | `regular` |
| Datetime | `datetimePreviousIcon` | `CaretLeft` | `regular` |
| Datetime | `datetimeCollapsedIcon` | `CaretDown` | `regular` |
| Datetime | `datetimeExpandedIcon` | `CaretUp` | `regular` |
| Fab Button | `fabButtonCloseIcon` | `X` | `regular` |
| Input | `inputClearIcon` | `X` | `regular` |
| Input Password Toggle | `inputPasswordShowIcon` | `Eye` | `regular` |
| Input Password Toggle | `inputPasswordHideIcon` | `EyeSlash` |
`regular` |
| Item | `itemDetailIcon` | `CaretRight` | `regular` |
| Menu Button | `menuIcon` | `List` | `regular` |
| Reorder | `reorderHandleIcon` | `List` | `regular` |
| Refresher | `refreshingIcon` | ❌ | |
| Refresher (arrow icon) | N/A | `CaretLeft` | `fill` |
| Searchbar | `searchbarCancelIcon` | `ArrowLeft` | `regular` |
| Searchbar | `searchbarClearIcon` | `X` | `regular` |
| Searchbar | `searchbarSearchIcon` | `MagnifyingGlass` | `regular` |
| Select | `selectExpandedIcon` | `CaretDown` | `regular` |
| Select | `selectCollapsedIcon` | `CaretDown` | `regular` |
| Toggle | `toggleCheckedIcon` | `LineVertical` | `regular` |
| Toggle | `toggleUncheckedIcon` | `Circle` | `regular` |

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

core/src/components/select/select.tsx

@@ -1,3 +1,4 @@
+import caretDownRegular from '@phosphor-icons/core/assets/regular/caret-down.svg';
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h, forceUpdate } from '@stencil/core';
 import type { NotchController } from '@utils/forms';
@@ -878,11 +879,11 @@ export class Select implements ComponentInterface {
    * next to the select text.
    */
   private renderSelectIcon() {
-    const { isExpanded, selectExpandIcon, selectCollapsedIcon } = this;
+    const { isExpanded, selectExpandedIcon, selectCollapsedIcon } = this;
     let icon = selectCollapsedIcon;
 
     if (isExpanded) {
-      icon = selectExpandIcon;
+      icon = selectExpandedIcon;
     }
 
     return <ion-icon class="select-icon" part="icon" aria-hidden="true" icon={icon}></ion-icon>;
@@ -941,25 +942,28 @@ export class Select implements ComponentInterface {
    * If an icon is set on the component, use that.
    * Otherwise, use the icon set in the config.
    * If no icon is set in the config, use the default icon.
-   *
-   * @returns {string} The icon to use for the expand icon.
    */
-  get selectExpandIcon(): string {
+  get selectExpandedIcon(): string {
+    // Return the expandedIcon or toggleIcon if either is explicitly set
+    if (this.expandedIcon != null) {
+      return this.expandedIcon;
+    } else if (this.toggleIcon != null) {
+      return this.toggleIcon;
+    }
+
+    // Determine the theme and map to default icons
     const theme = getIonTheme(this);
-    const icon = this.expandedIcon;
-    let defaultExpandIcon = theme === 'ios' ? chevronExpand : caretDownSharp;
+    const defaultIcons = {
+      ios: chevronExpand,
+      ionic: caretDownRegular,
+      md: caretDownSharp,
+    };
 
-    if (icon !== undefined) {
-      // Icon is set on the component.
-      return icon;
-    }
+    // Get the default icon based on the theme, falling back to 'md' icon if necessary
+    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
 
-    if (this.toggleIcon) {
-      // If the toggleIcon is set, use that as the default expand icon.
-      defaultExpandIcon = this.toggleIcon;
-    }
-
-    return config.get('selectExpandIcon', defaultExpandIcon);
+    // Return the configured select expanded icon or the default icon
+    return config.get('selectExpandedIcon', defaultIcon);
   }
 
   /**
@@ -967,19 +971,24 @@ export class Select implements ComponentInterface {
    * If an icon is set on the component, use that.
    * Otherwise, use the icon set in the config.
    * If no icon is set in the config, use the default icon.
-   *
-   * @returns {string} The icon to use for the collapsed icon.
    */
   get selectCollapsedIcon(): string {
-    const theme = getIonTheme(this);
-    const icon = this.toggleIcon;
-    const defaultIcon = theme === 'ios' ? chevronExpand : caretDownSharp;
-
-    if (icon !== undefined) {
-      // Icon is set on the component.
-      return icon;
+    // Return the toggleIcon if it is explicitly set
+    if (this.toggleIcon) {
+      return this.toggleIcon;
     }
 
+    // Determine the theme and map to default icons
+    const theme = getIonTheme(this);
+    const defaultIcons = {
+      ios: chevronExpand,
+      ionic: caretDownRegular,
+      md: caretDownSharp,
+    };
+
+    // Get the default icon based on the theme, falling back to 'md' icon if necessary
+    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+
     return config.get('selectCollapsedIcon', defaultIcon);
   }