feat(config): add icon options and align ionic theme with md defaults

core/package.json

@@ -34,7 +34,6 @@
     "loader/"
   ],
   "dependencies": {
-    "@phosphor-icons/core": "^2.1.1",
     "@stencil/core": "4.43.5",
     "ionicons": "^8.1.0",
     "tslib": "^2.1.0"

core/src/components/accordion/accordion.tsx

@@ -1,4 +1,3 @@
-import caretDownRegular from '@phosphor-icons/core/assets/regular/caret-down.svg';
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
 import { addEventListener, getElementRoot, raf, removeEventListener, transitionEndAsync } from '@utils/helpers';
@@ -242,25 +241,20 @@ export class Accordion implements ComponentInterface {
     button.setAttribute('aria-expanded', `${expanded}`);
   };
 
+  /**
+   * Get the icon to use for the toggle icon.
+   * 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.
+   */
   get accordionToggleIcon() {
     // Return the icon if it is explicitly set
     if (this.toggleIcon != null) {
       return this.toggleIcon;
     }
 
-    // Determine the theme and map to default icons
-    const theme = getIonTheme(this);
-    const defaultIcons = {
-      ios: chevronDown,
-      ionic: caretDownRegular,
-      md: chevronDown,
-    };
-
-    // Get the default icon based on the theme, falling back to 'md' icon if necessary
-    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-
     // Return the configured accordion toggle icon or the default icon
-    return config.get('accordionToggleIcon', defaultIcon);
+    return config.get('accordionToggleIcon', chevronDown);
   }
 
   private slotToggleIcon = () => {

core/src/components/back-button/back-button.tsx

@@ -1,4 +1,3 @@
-import caretLeftRegular from '@phosphor-icons/core/assets/regular/caret-left.svg';
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, h } from '@stencil/core';
 import type { ButtonInterface } from '@utils/element-interface';
@@ -80,22 +79,21 @@ export class BackButton implements ComponentInterface, ButtonInterface {
     }
   }
 
+  /**
+   * Get the icon to use for the back button icon.
+   * 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.
+   */
   get backButtonIcon() {
     // Return the icon if it is explicitly set
     if (this.icon != null) {
       return this.icon;
     }
 
-    // Determine the theme and map to default icons
+    // Determine the theme and map to the default icon
     const theme = getIonTheme(this);
-    const defaultIcons = {
-      ios: chevronBack,
-      ionic: caretLeftRegular,
-      md: arrowBackSharp,
-    };
-
-    // Get the default icon based on the theme, falling back to 'md' icon if necessary
-    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+    const defaultIcon = theme === 'ios' ? chevronBack : arrowBackSharp;
 
     // Return the configured back button icon or the default icon
     return config.get('backButtonIcon', defaultIcon);

core/src/components/breadcrumb/breadcrumb.tsx

@@ -1,5 +1,3 @@
-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';
@@ -135,36 +133,24 @@ export class Breadcrumb implements ComponentInterface {
     this.inheritedAttributes = inheritAriaAttributes(this.el);
   }
 
+  /**
+   * Get the icon to use for the collapsed icon.
+   * Use the icon set in the config.
+   * If no icon is set in the config, use the default icon.
+   */
   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);
+    return config.get('breadcrumbCollapsedIcon', ellipsisHorizontal);
   }
 
+  /**
+   * Get the icon to use for the separator icon.
+   * Use the icon set in the config.
+   * If no icon is set in the config, use the default icon.
+   */
   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);
+    return config.get('breadcrumbSeparatorIcon', chevronForwardOutline);
   }
 
   private isClickable(): boolean {

core/src/components/datetime/datetime.tsx

@@ -1,5 +1,3 @@
-import caretLeftRegular from '@phosphor-icons/core/assets/regular/caret-left.svg';
-import caretRightRegular from '@phosphor-icons/core/assets/regular/caret-right.svg';
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h, writeTask } from '@stencil/core';
 import { startFocusVisible } from '@utils/focus-visible';
@@ -2749,85 +2747,47 @@ export class Datetime implements ComponentInterface {
 
   /**
    * Get the icon to use for the next icon.
-   * Otherwise, use the icon set in the config.
+   * Use the icon set in the config.
    * If no icon is set in the config, use the default icon.
    */
   get datetimeNextIcon(): string {
-    // Determine the theme and map to default icons
-    const theme = getIonTheme(this);
-    const defaultIcons = {
-      ios: chevronForward,
-      ionic: caretRightRegular,
-      md: chevronForward,
-    };
-
-    // Get the default icon based on the theme, falling back to 'md' icon if necessary
-    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-
     // Return the configured datetime next icon or the default icon
-    return config.get('datetimeNextIcon', defaultIcon);
+    return config.get('datetimeNextIcon', chevronForward);
   }
 
   /**
    * Get the icon to use for the previous icon.
-   * Otherwise, use the icon set in the config.
+   * Use the icon set in the config.
    * If no icon is set in the config, use the default icon.
    */
   get datetimePreviousIcon(): string {
-    // Determine the theme and map to default icons
-    const theme = getIonTheme(this);
-    const defaultIcons = {
-      ios: chevronBack,
-      ionic: caretLeftRegular,
-      md: chevronBack,
-    };
-
-    // Get the default icon based on the theme, falling back to 'md' icon if necessary
-    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-
     // Return the configured datetime previous icon or the default icon
-    return config.get('datetimePreviousIcon', defaultIcon);
+    return config.get('datetimePreviousIcon', chevronBack);
   }
 
   /**
    * Get the icon to use for the show month and year icon.
-   * Otherwise, use the icon set in the config.
+   * Use the icon set in the config.
    * If no icon is set in the config, use the default icon.
    */
   get datetimeCollapsedIcon(): string | undefined {
-    // Determine the theme and map to default icons
+    // Determine the theme and map to the default icon
     const theme = getIonTheme(this);
-
-    const defaultIcons = {
-      ios: chevronForward,
-      ionic: undefined,
-      md: caretDownSharp,
-    };
-
-    // Get the default icon based on the theme, falling back to 'md' icon if necessary
-    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+    const defaultIcon = theme === 'ios' ? chevronForward : caretDownSharp;
 
     // Return the configured datetime show month and year icon or the default icon
     return config.get('datetimeCollapsedIcon', defaultIcon);
   }
 
   /**
    * Get the icon to use for the hide month and year icon.
-   * Otherwise, use the icon set in the config.
+   * Use the icon set in the config.
    * If no icon is set in the config, use the default icon.
    */
   get datetimeExpandedIcon(): string | undefined {
-    // Determine the theme and map to default icons
+    // Determine the theme and map to the default icon
     const theme = getIonTheme(this);
-
-    const defaultIcons = {
-      ios: chevronDown,
-      ionic: undefined,
-      md: caretUpSharp,
-    };
-
-    // Get the default icon based on the theme, falling back to 'md' icon if necessary
-    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+    const defaultIcon = theme === 'ios' ? chevronDown : caretUpSharp;
 
     // Return the configured datetime hide month and year icon or the default icon
     return config.get('datetimeExpandedIcon', defaultIcon);

core/src/components/fab-button/fab-button.tsx

@@ -1,4 +1,3 @@
-import xRegular from '@phosphor-icons/core/assets/regular/x.svg';
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, Watch, h } from '@stencil/core';
 import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
@@ -238,25 +237,20 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
     this.inheritedAttributes = inheritAriaAttributes(this.el);
   }
 
+  /**
+   * Get the icon to use for the close icon.
+   * 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.
+   */
   get fabButtonCloseIcon() {
     // Return the icon if it is explicitly set
     if (this.closeIcon != null) {
       return this.closeIcon;
     }
 
-    // Determine the theme and map to default icons
-    const theme = getIonTheme(this);
-    const defaultIcons = {
-      ios: close,
-      ionic: xRegular,
-      md: close,
-    };
-
-    // Get the default icon based on the theme, falling back to 'md' icon if necessary
-    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-
     // Return the configured fab button close icon or the default icon
-    return config.get('fabButtonCloseIcon', defaultIcon);
+    return config.get('fabButtonCloseIcon', close);
   }
 
   render() {

core/src/components/input-password-toggle/input-password-toggle.tsx

@@ -1,13 +1,11 @@
-import eyeSlashRegular from '@phosphor-icons/core/assets/regular/eye-slash.svg';
-import eyeRegular from '@phosphor-icons/core/assets/regular/eye.svg';
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, h, Watch } from '@stencil/core';
 import { printIonWarning } from '@utils/logging';
 import { createColorClasses } from '@utils/theme';
 import { eyeOff, eye } from 'ionicons/icons';
 
 import { config } from '../../global/config';
-import { getIonMode, getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color, TextFieldTypes } from '../../interface';
 
 /**
@@ -109,46 +107,36 @@ export class InputPasswordToggle implements ComponentInterface {
     inputElRef.type = inputElRef.type === 'text' ? 'password' : 'text';
   };
 
+  /**
+   * Get the icon to use for the hide icon.
+   * 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.
+   */
   get inputPasswordHideIcon() {
     // Return the icon if it is explicitly set
     if (this.hideIcon != null) {
       return this.hideIcon;
     }
 
-    // Determine the theme and map to default icons
-    const theme = getIonTheme(this);
-    const defaultIcons = {
-      ios: eyeOff,
-      ionic: eyeSlashRegular,
-      md: eyeOff,
-    };
-
-    // Get the default icon based on the theme, falling back to 'md' icon if necessary
-    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-
     // Return the configured input password hide icon or the default icon
-    return config.get('inputPasswordHideIcon', defaultIcon);
+    return config.get('inputPasswordHideIcon', eyeOff);
   }
 
+  /**
+   * Get the icon to use for the show icon.
+   * 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.
+   */
   get inputPasswordShowIcon() {
     // Return the icon if it is explicitly set
     if (this.showIcon != null) {
       return this.showIcon;
     }
 
-    // Determine the theme and map to default icons
-    const theme = getIonTheme(this);
-    const defaultIcons = {
-      ios: eye,
-      ionic: eyeRegular,
-      md: eye,
-    };
-
-    // Get the default icon based on the theme, falling back to 'md' icon if necessary
-    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-
     // Return the configured input password show icon or the default icon
-    return config.get('inputPasswordShowIcon', defaultIcon);
+    return config.get('inputPasswordShowIcon', eye);
   }
 
   render() {

core/src/components/input/input.tsx

@@ -1,4 +1,3 @@
-import xRegular from '@phosphor-icons/core/assets/regular/x.svg';
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import {
   Build,
@@ -957,16 +956,9 @@ export class Input implements ComponentInterface {
       return this.clearInputIcon;
     }
 
-    // Determine the theme and map to default icons
+    // Determine the theme and map to the default icon
     const theme = getIonTheme(this);
-    const defaultIcons = {
-      ios: closeCircle,
-      ionic: xRegular,
-      md: closeSharp,
-    };
-
-    // Get the default icon based on the theme, falling back to 'md' icon if necessary
-    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+    const defaultIcon = theme === 'ios' ? closeCircle : closeSharp;
 
     // Return the configured input clear icon or the default icon
     return config.get('inputClearIcon', defaultIcon);