feat(many): expand global config for icons (#29373)

Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>

core/api.txt

@@ -4,7 +4,7 @@ ion-accordion,prop,disabled,boolean,false,false,false
 ion-accordion,prop,mode,"ios" | "md",undefined,false,false
 ion-accordion,prop,readonly,boolean,false,false,false
 ion-accordion,prop,theme,"ios" | "md" | "ionic",undefined,false,false
-ion-accordion,prop,toggleIcon,string,chevronDown,false,false
+ion-accordion,prop,toggleIcon,string | undefined,undefined,false,false
 ion-accordion,prop,toggleIconSlot,"end" | "start",'end',false,false
 ion-accordion,prop,value,string,`ion-accordion-${accordionIds++}`,false,false
 ion-accordion,part,content
@@ -494,7 +494,7 @@ ion-fab,method,close,close() => Promise<void>
 
 ion-fab-button,shadow
 ion-fab-button,prop,activated,boolean,false,false,false
-ion-fab-button,prop,closeIcon,string,close,false,false
+ion-fab-button,prop,closeIcon,string | undefined,undefined,false,false
 ion-fab-button,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-fab-button,prop,disabled,boolean,false,false,false
 ion-fab-button,prop,download,string | undefined,undefined,false,false
@@ -669,7 +669,7 @@ ion-item,shadow
 ion-item,prop,button,boolean,false,false,false
 ion-item,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-item,prop,detail,boolean | undefined,undefined,false,false
-ion-item,prop,detailIcon,string,chevronForward,false,false
+ion-item,prop,detailIcon,string | undefined,undefined,false,false
 ion-item,prop,disabled,boolean,false,false,false
 ion-item,prop,download,string | undefined,undefined,false,false
 ion-item,prop,href,string | undefined,undefined,false,false
@@ -1282,7 +1282,7 @@ ion-searchbar,prop,animated,boolean,false,false,false
 ion-searchbar,prop,autocapitalize,string,'off',false,false
 ion-searchbar,prop,autocomplete,"name" | "email" | "tel" | "url" | "on" | "off" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo",'off',false,false
 ion-searchbar,prop,autocorrect,"off" | "on",'off',false,false
-ion-searchbar,prop,cancelButtonIcon,string,config.get('backButtonIcon', arrowBackSharp) as string,false,false
+ion-searchbar,prop,cancelButtonIcon,string | undefined,undefined,false,false
 ion-searchbar,prop,cancelButtonText,string,'Cancel',false,false
 ion-searchbar,prop,clearIcon,string | undefined,undefined,false,false
 ion-searchbar,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true

core/src/components.d.ts

@@ -96,7 +96,7 @@ export namespace Components {
         /**
           * The toggle icon to use. This icon will be rotated when the accordion is expanded or collapsed.
          */
-        "toggleIcon": string;
+        "toggleIcon"?: string;
         /**
           * The slot inside of `ion-item` to place the toggle icon. Defaults to `"end"`.
          */
@@ -1153,7 +1153,7 @@ export namespace Components {
         /**
           * The icon name to use for the close icon. This will appear when the fab button is pressed. Only applies if it is the main button inside of a fab containing a fab list.
          */
-        "closeIcon": string;
+        "closeIcon"?: string;
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
@@ -1530,7 +1530,7 @@ export namespace Components {
         /**
           * The icon to use when `detail` is set to `true`.
          */
-        "detailIcon": string;
+        "detailIcon"?: string;
         /**
           * If `true`, the user cannot interact with the item.
          */
@@ -2989,7 +2989,7 @@ export namespace Components {
         /**
           * Set the cancel button icon. Only available when the theme is `"md"`. Defaults to `"arrow-back-sharp"`.
          */
-        "cancelButtonIcon": string;
+        "cancelButtonIcon"?: string;
         /**
           * Set the the cancel button text. Only available when the theme is `"ios"`.
          */

core/src/components/accordion/accordion.tsx

@@ -79,7 +79,7 @@ export class Accordion implements ComponentInterface {
    * rotated when the accordion is expanded
    * or collapsed.
    */
-  @Prop() toggleIcon = chevronDown;
+  @Prop() toggleIcon?: string;
 
   /**
    * The slot inside of `ion-item` to
@@ -193,7 +193,8 @@ export class Accordion implements ComponentInterface {
       return;
     }
 
-    const { toggleIconSlot, toggleIcon } = this;
+    const { toggleIconSlot } = this;
+    const accordionToggleIcon = this.toggleIcon ?? config.get('accordionToggleIcon', chevronDown);
 
     /**
      * Check if there already is a toggle icon.
@@ -208,7 +209,7 @@ export class Accordion implements ComponentInterface {
     iconEl.slot = toggleIconSlot;
     iconEl.lazy = false;
     iconEl.classList.add('ion-accordion-toggle-icon');
-    iconEl.icon = toggleIcon;
+    iconEl.icon = accordionToggleIcon;
     iconEl.setAttribute('aria-hidden', 'true');
 
     ionItem.appendChild(iconEl);

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

@@ -82,7 +82,7 @@ export class BackButton implements ComponentInterface, ButtonInterface {
   get backButtonIcon() {
     const icon = this.icon;
     if (icon != null) {
-      // icon is set on the component or by the config
+      // Icon is set on the component or by the config.
       return icon;
     }
 

core/src/components/breadcrumb/breadcrumb.tsx

@@ -5,6 +5,7 @@ import { inheritAriaAttributes } from '@utils/helpers';
 import { createColorClasses, hostContext, openURL } from '@utils/theme';
 import { chevronForwardOutline, ellipsisHorizontal } from 'ionicons/icons';
 
+import { config } from '../../global/config';
 import { getIonTheme } from '../../global/ionic-global';
 import type { AnimationBuilder, Color } from '../../interface';
 import type { RouterDirection } from '../router/utils/interface';
@@ -167,6 +168,9 @@ 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;
@@ -224,7 +228,7 @@ export class Breadcrumb implements ComponentInterface {
               'breadcrumbs-collapsed-indicator': true,
             }}
           >
-            <ion-icon aria-hidden="true" icon={ellipsisHorizontal} lazy={false}></ion-icon>
+            <ion-icon aria-hidden="true" icon={breadcrumbCollapsedIcon} lazy={false}></ion-icon>
           </button>
         )}
         {showSeparator && (
@@ -236,7 +240,7 @@ export class Breadcrumb implements ComponentInterface {
           <span class="breadcrumb-separator" part="separator" aria-hidden="true">
             <slot name="separator">
               {theme === 'ios' ? (
-                <ion-icon icon={chevronForwardOutline} lazy={false} flip-rtl></ion-icon>
+                <ion-icon icon={breadcrumbSeparatorIcon} lazy={false} flip-rtl></ion-icon>
               ) : (
                 <span>/</span>
               )}

core/src/components/datetime/datetime.tsx

@@ -7,6 +7,7 @@ import { isRTL } from '@utils/rtl';
 import { createColorClasses } from '@utils/theme';
 import { caretDownSharp, caretUpSharp, chevronBack, chevronDown, chevronForward } from 'ionicons/icons';
 
+import { config } from '../../global/config';
 import { getIonMode, getIonTheme } from '../../global/ionic-global';
 import type { Color, StyleEventDetail, Theme } from '../../interface';
 
@@ -2115,9 +2116,10 @@ export class Datetime implements ComponentInterface {
    */
 
   private renderCalendarHeader(theme: Theme) {
-    const { disabled } = this;
-    const expandedIcon = theme === 'ios' ? chevronDown : caretUpSharp;
-    const collapsedIcon = theme === 'ios' ? chevronForward : caretDownSharp;
+    const { disabled, datetimeShowMonthYearIcon, datetimeHideMonthYearIcon } = this;
+
+    const datetimeNextIcon = config.get('datetimeNextIcon', chevronForward);
+    const datetimePrevIcon = config.get('datetimePreviousIcon', chevronBack);
 
     const prevMonthDisabled = disabled || isPrevMonthDisabled(this.workingParts, this.minParts, this.maxParts);
     const nextMonthDisabled = disabled || isNextMonthDisabled(this.workingParts, this.maxParts);
@@ -2144,7 +2146,7 @@ export class Datetime implements ComponentInterface {
                 {getMonthAndYear(this.locale, this.workingParts)}
                 <ion-icon
                   aria-hidden="true"
-                  icon={this.showMonthAndYear ? expandedIcon : collapsedIcon}
+                  icon={this.showMonthAndYear ? datetimeShowMonthYearIcon : datetimeHideMonthYearIcon}
                   lazy={false}
                   flipRtl={true}
                 ></ion-icon>
@@ -2160,7 +2162,7 @@ export class Datetime implements ComponentInterface {
                   dir={hostDir}
                   aria-hidden="true"
                   slot="icon-only"
-                  icon={chevronBack}
+                  icon={datetimePrevIcon}
                   lazy={false}
                   flipRtl
                 ></ion-icon>
@@ -2170,7 +2172,7 @@ export class Datetime implements ComponentInterface {
                   dir={hostDir}
                   aria-hidden="true"
                   slot="icon-only"
-                  icon={chevronForward}
+                  icon={datetimeNextIcon}
                   lazy={false}
                   flipRtl
                 ></ion-icon>
@@ -2593,6 +2595,34 @@ export class Datetime implements ComponentInterface {
     }
   }
 
+  /**
+   * Get the icon to use for the show month and year icon.
+   * 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 show month and year icon.
+   */
+  get datetimeShowMonthYearIcon(): string {
+    const theme = getIonTheme(this);
+    const expandedIcon = theme === 'ios' ? chevronDown : caretUpSharp;
+
+    return config.get('datetimeShowMonthYearIcon', expandedIcon);
+  }
+
+  /**
+   * Get the icon to use for the hide month and year icon.
+   * 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 hide month and year icon.
+   */
+  get datetimeHideMonthYearIcon(): string {
+    const theme = getIonTheme(this);
+    const collapsedIcon = theme === 'ios' ? chevronForward : caretDownSharp;
+
+    return config.get('datetimeHideMonthYearIcon', collapsedIcon);
+  }
+
   render() {
     const {
       name,

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

@@ -6,6 +6,7 @@ import type { Attributes } from '@utils/helpers';
 import { createColorClasses, hostContext, openURL } from '@utils/theme';
 import { close } from 'ionicons/icons';
 
+import { config } from '../../global/config';
 import { getIonTheme } from '../../global/ionic-global';
 import type { AnimationBuilder, Color } from '../../interface';
 import type { RouterDirection } from '../router/utils/interface';
@@ -115,7 +116,7 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
    * is pressed. Only applies if it is the main button inside of a fab containing a
    * fab list.
    */
-  @Prop() closeIcon = close;
+  @Prop() closeIcon?: string;
 
   /**
    * Emitted when the button has focus.
@@ -166,6 +167,7 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
             rel: this.rel,
             target: this.target,
           };
+    const fabButtonCloseIcon = this.closeIcon ?? config.get('fabButtonCloseIcon', close);
 
     return (
       <Host
@@ -196,7 +198,7 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
         >
           <ion-icon
             aria-hidden="true"
-            icon={this.closeIcon}
+            icon={fabButtonCloseIcon}
             part="close-icon"
             class="close-icon"
             lazy={false}

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

@@ -4,6 +4,7 @@ import { printIonWarning } from '@utils/logging';
 import { createColorClasses } from '@utils/theme';
 import { eyeOff, eye } from 'ionicons/icons';
 
+import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import type { Color, TextFieldTypes } from '../../interface';
 
@@ -110,10 +111,9 @@ export class InputPasswordToggle implements ComponentInterface {
 
     const mode = getIonMode(this);
 
-    const showPasswordIcon = this.showIcon ?? eye;
-    const hidePasswordIcon = this.hideIcon ?? eyeOff;
-
     const isPasswordVisible = type === 'text';
+    const inputPasswordShowIcon = this.showIcon ?? config.get('inputPasswordShowIcon', eye);
+    const inputPasswordHideIcon = this.hideIcon ?? config.get('inputPasswordHideIcon', eyeOff);
 
     return (
       <Host
@@ -143,7 +143,7 @@ export class InputPasswordToggle implements ComponentInterface {
           <ion-icon
             slot="icon-only"
             aria-hidden="true"
-            icon={isPasswordVisible ? hidePasswordIcon : showPasswordIcon}
+            icon={isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon}
           ></ion-icon>
         </ion-button>
       </Host>

core/src/components/input/input.tsx

@@ -9,6 +9,7 @@ import type { SlotMutationController } from '@utils/slot-mutation-controller';
 import { createColorClasses, hostContext } from '@utils/theme';
 import { closeCircle, closeSharp } from 'ionicons/icons';
 
+import { config } from '../../global/config';
 import { getIonTheme } from '../../global/ionic-global';
 import type { AutocompleteTypes, Color, TextFieldTypes } from '../../interface';
 
@@ -690,16 +691,35 @@ export class Input implements ComponentInterface {
     return this.renderLabel();
   }
 
+  /**
+   * Get the icon to use for the clear 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.
+   *
+   * @internal
+   * @returns {string} The icon to use for the clear icon.
+   */
+  get inputClearIcon(): string {
+    const theme = getIonTheme(this);
+    const defaultClearIcon = theme === 'ios' ? closeCircle : closeSharp;
+    const icon = this.clearInputIcon;
+
+    if (icon !== undefined) {
+      // Icon is set on the component.
+      return icon;
+    }
+
+    return config.get('inputClearIcon', defaultClearIcon);
+  }
+
   render() {
-    const { disabled, fill, readonly, shape, inputId, labelPlacement, el, hasFocus, clearInputIcon } = this;
+    const { disabled, fill, readonly, shape, inputId, labelPlacement, el, hasFocus, inputClearIcon } = this;
     const theme = getIonTheme(this);
     const value = this.getValue();
     const inItem = hostContext('ion-item', this.el);
     const shouldRenderHighlight = theme === 'md' && fill !== 'outline' && !inItem;
 
-    const defaultClearIcon = theme === 'ios' ? closeCircle : closeSharp;
-    const clearIconData = clearInputIcon ?? defaultClearIcon;
-
     const hasValue = this.hasValue();
     const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;
 
@@ -806,7 +826,7 @@ export class Input implements ComponentInterface {
                 }}
                 onClick={this.clearTextInput}
               >
-                <ion-icon aria-hidden="true" icon={clearIconData}></ion-icon>
+                <ion-icon aria-hidden="true" icon={inputClearIcon}></ion-icon>
               </button>
             )}
             <slot name="end"></slot>

core/src/components/item/item.tsx

@@ -6,6 +6,7 @@ import { inheritAttributes, raf } from '@utils/helpers';
 import { createColorClasses, hostContext, openURL } from '@utils/theme';
 import { chevronForward } from 'ionicons/icons';
 
+import { config } from '../../global/config';
 import { getIonTheme } from '../../global/ionic-global';
 import type { AnimationBuilder, Color, CssClassMap, StyleEventDetail } from '../../interface';
 import type { RouterDirection } from '../router/utils/interface';
@@ -61,7 +62,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
   /**
    * The icon to use when `detail` is set to `true`.
    */
-  @Prop() detailIcon = chevronForward;
+  @Prop() detailIcon?: string;
 
   /**
    * If `true`, the user cannot interact with the item.
@@ -244,7 +245,6 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
   render() {
     const {
       detail,
-      detailIcon,
       download,
       labelColorStyles,
       lines,
@@ -262,6 +262,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
     const clickable = this.isClickable();
     const canActivate = this.canActivate();
     const TagType = clickable ? (href === undefined ? 'button' : 'a') : ('div' as any);
+    const itemDetailIcon = this.detailIcon ?? config.get('itemDetailIcon', chevronForward);
 
     const attrs =
       TagType === 'button'
@@ -368,12 +369,12 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
             <slot name="end"></slot>
             {showDetail && (
               <ion-icon
-                icon={detailIcon}
+                icon={itemDetailIcon}
                 lazy={false}
                 class="item-detail-icon"
                 part="detail-icon"
                 aria-hidden="true"
-                flip-rtl={detailIcon === chevronForward}
+                flip-rtl={itemDetailIcon === chevronForward}
               ></ion-icon>
             )}
           </div>