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/breadcrumb/breadcrumb.tsx

@@ -1,3 +1,5 @@
+import caretRightRegular from '@phosphor-icons/core/assets/regular/caret-right.svg';
+import dotsThreeRegular from '@phosphor-icons/core/assets/regular/dots-three.svg';
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, h } from '@stencil/core';
 import type { Attributes } from '@utils/helpers';
@@ -133,6 +135,38 @@ export class Breadcrumb implements ComponentInterface {
     this.inheritedAttributes = inheritAriaAttributes(this.el);
   }
 
+  get breadcrumbCollapsedIcon() {
+    // Determine the theme and map to default icons
+    const theme = getIonTheme(this);
+    const defaultIcons = {
+      ios: ellipsisHorizontal,
+      ionic: dotsThreeRegular,
+      md: ellipsisHorizontal,
+    };
+
+    // Get the default icon based on the theme, falling back to 'md' icon if necessary
+    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+
+    // Return the configured breadcrumb collapsed icon or the default icon
+    return config.get('breadcrumbCollapsedIcon', defaultIcon);
+  }
+
+  get breadcrumbSeparatorIcon() {
+    // Determine the theme and map to default icons
+    const theme = getIonTheme(this);
+    const defaultIcons = {
+      ios: chevronForwardOutline,
+      ionic: caretRightRegular,
+      md: chevronForwardOutline,
+    };
+
+    // Get the default icon based on the theme, falling back to 'md' icon if necessary
+    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+
+    // Return the configured breadcrumb separator icon or the default icon
+    return config.get('breadcrumbSeparatorIcon', defaultIcon);
+  }
+
   private isClickable(): boolean {
     return this.href !== undefined;
   }
@@ -153,6 +187,8 @@ export class Breadcrumb implements ComponentInterface {
     const {
       color,
       active,
+      breadcrumbCollapsedIcon,
+      breadcrumbSeparatorIcon,
       collapsed,
       disabled,
       download,
@@ -168,9 +204,6 @@ export class Breadcrumb implements ComponentInterface {
     const clickable = this.isClickable();
     const TagType = this.href === undefined ? 'span' : ('a' as any);
 
-    const breadcrumbSeparatorIcon = config.get('breadcrumbSeparatorIcon', chevronForwardOutline);
-    const breadcrumbCollapsedIcon = config.get('breadcrumbCollapsedIcon', ellipsisHorizontal);
-
     // Links can still be tabbed to when set to disabled if they have an href
     // in order to truly disable them we can keep it as an anchor but remove the href
     const href = disabled ? undefined : this.href;
@@ -239,7 +272,7 @@ export class Breadcrumb implements ComponentInterface {
            */
           <span class="breadcrumb-separator" part="separator" aria-hidden="true">
             <slot name="separator">
-              {theme === 'ios' ? (
+              {theme === 'ios' || theme === 'ionic' ? (
                 <ion-icon icon={breadcrumbSeparatorIcon} lazy={false} flip-rtl></ion-icon>
               ) : (
                 <span>/</span>