Skip to content

refactor(many): remove Phosphor Icon defaults from the ionic theme #31418

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
brandyscarney wants to merge 3 commits into
base: next
Choose a base branch
from
+39 −288
Draft

refactor(many): remove Phosphor Icon defaults from the ionic theme #31418

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7057225
refactor(many): remove phosphor icon usage
brandyscarney Sep 2, 2026
69200e8
chore(deps): remove @phosphor-icons/core
brandyscarney Sep 2, 2026
4023d2a
chore: remove old svgTransform for Jest
brandyscarney Sep 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 0 additions & 7 deletions core/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
14 changes: 1 addition & 13 deletions core/src/components/accordion/accordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -248,19 +247,8 @@ export class Accordion implements ComponentInterface {
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 = () => {
Expand Down
12 changes: 2 additions & 10 deletions core/src/components/back-button/back-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -86,16 +85,9 @@ export class BackButton implements ComponentInterface, ButtonInterface {
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);
Expand Down
28 changes: 2 additions & 26 deletions core/src/components/breadcrumb/breadcrumb.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -136,35 +134,13 @@ export class Breadcrumb implements ComponentInterface {
}

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 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 {
Expand Down
52 changes: 6 additions & 46 deletions core/src/components/datetime/datetime.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -2753,19 +2751,8 @@ export class Datetime implements ComponentInterface {
* 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);
}

/**
Expand All @@ -2774,19 +2761,8 @@ export class Datetime implements ComponentInterface {
* 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);
}

/**
Expand All @@ -2795,17 +2771,9 @@ export class Datetime implements ComponentInterface {
* 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);
Expand All @@ -2817,17 +2785,9 @@ export class Datetime implements ComponentInterface {
* 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);
Expand Down
14 changes: 1 addition & 13 deletions core/src/components/fab-button/fab-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -244,19 +243,8 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
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() {
Expand Down
30 changes: 3 additions & 27 deletions core/src/components/input-password-toggle/input-password-toggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

/**
Expand Down Expand Up @@ -115,19 +113,8 @@ export class InputPasswordToggle implements ComponentInterface {
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 inputPasswordShowIcon() {
Expand All @@ -136,19 +123,8 @@ export class InputPasswordToggle implements ComponentInterface {
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() {
Expand Down
12 changes: 2 additions & 10 deletions core/src/components/input/input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import xRegular from '@phosphor-icons/core/assets/regular/x.svg';
import type { ComponentInterface, EventEmitter } from '@stencil/core';
import {
Build,
Expand Down Expand Up @@ -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);
Expand Down
16 changes: 2 additions & 14 deletions core/src/components/item/item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import caretRightRegular from '@phosphor-icons/core/assets/regular/caret-right.svg';
import type { ComponentInterface } from '@stencil/core';
import { Build, Component, Element, Host, Listen, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
Expand Down Expand Up @@ -363,27 +362,16 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
return this.detailIcon;
}

// 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 item detail icon or the default icon
return config.get('itemDetailIcon', defaultIcon);
return config.get('itemDetailIcon', chevronForward);
}

/**
* The icon should be flipped when the app is RTL and
* the icon is a variation of chevron.
*/
get shouldFlipIcon() {
return this.itemDetailIcon === chevronForward || this.itemDetailIcon === caretRightRegular;
return this.itemDetailIcon === chevronForward;
}

render() {
Expand Down
12 changes: 2 additions & 10 deletions core/src/components/menu-button/menu-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import listRegular from '@phosphor-icons/core/assets/regular/list.svg';
import type { ComponentInterface } from '@stencil/core';
import { Component, Element, Host, Listen, Prop, State, h } from '@stencil/core';
import type { ButtonInterface } from '@utils/element-interface';
Expand Down Expand Up @@ -78,16 +77,9 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
}

get menuIcon() {
// Determine the theme and map to default icons
// Determine the theme and map to the default icon
const theme = getIonTheme(this);
const defaultIcons = {
ios: menuOutline,
ionic: listRegular,
md: menuSharp,
};

// 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' ? menuOutline : menuSharp;

// Return the configured menu icon or the default icon
return config.get('menuIcon', defaultIcon);
Expand Down
4 changes: 1 addition & 3 deletions core/src/components/refresher-content/refresher-content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import caretLeftFill from '@phosphor-icons/core/assets/fill/caret-left-fill.svg';
import type { ComponentInterface } from '@stencil/core';
import { Component, Element, Host, Prop, h } from '@stencil/core';
import { ENABLE_HTML_CONTENT_DEFAULT } from '@utils/config';
Expand Down Expand Up @@ -117,7 +116,6 @@ export class RefresherContent implements ComponentInterface {
const pullingIcon = this.pullingIcon;
const hasSpinner = pullingIcon != null && (SPINNERS[pullingIcon] as any) !== undefined;
const theme = getIonTheme(this);
const arrowIcon = theme === 'ionic' ? caretLeftFill : caretBackSharp;

return (
<Host
Expand All @@ -132,7 +130,7 @@ export class RefresherContent implements ComponentInterface {
<ion-spinner name={this.pullingIcon as SpinnerTypes} paused></ion-spinner>
{(theme === 'md' || theme === 'ionic') && this.pullingIcon === 'circular' && (
<div class="arrow-container">
<ion-icon icon={arrowIcon} aria-hidden="true"></ion-icon>
<ion-icon icon={caretBackSharp} aria-hidden="true"></ion-icon>
</div>
)}
</div>
Expand Down
Loading
Loading