refactor(icons): update the Ionic theme to use Phosphor font icons

core/package.json

@@ -35,6 +35,7 @@
   ],
   "dependencies": {
     "@phosphor-icons/core": "^2.1.1",
+    "@phosphor-icons/web": "^2.1.2",
     "@stencil/core": "4.43.0",
     "ionicons": "^8.0.13",
     "tslib": "^2.1.0"
@@ -79,7 +80,8 @@
   },
   "scripts": {
     "build": "npm run clean && npm run build.css && stencil build --es5 --docs-json dist/docs.json",
-    "build.css": "npm run css.sass && npm run css.minify",
+    "build.css": "npm run css.sass && npm run copy.fonts && npm run css.minify",
+    "copy.fonts": "node scripts/copy-fonts.mjs",
     "build.debug": "npm run clean && stencil build --debug",
     "build.docs.json": "stencil build --docs-json dist/docs.json",
     "build.tokens": "npx build.tokens --dest src/foundations/ --root=false --scss=true --scss-file=ionic.vars.scss --scss-prefix=ion --utilities=false && npm run prettier.tokens",

core/scripts/copy-fonts.mjs

@@ -0,0 +1,14 @@
+import { copyFileSync, mkdirSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const src = join(__dirname, '../node_modules/@phosphor-icons/web/src/regular');
+const dest = join(__dirname, '../css/fonts');
+
+mkdirSync(dest, { recursive: true });
+
+['Phosphor.woff2', 'Phosphor.woff'].forEach((file) => {
+  copyFileSync(join(src, file), join(dest, file));
+});

core/src/components/avatar/avatar.ionic.scss

@@ -144,31 +144,55 @@
   height: globals.$ion-scale-300;
 }
 
+:host(.avatar-xxsmall) ::slotted(i.ph) {
+  font-size: globals.$ion-scale-300;
+}
+
 :host(.avatar-xsmall) ::slotted(ion-icon) {
   width: globals.$ion-scale-400;
   height: globals.$ion-scale-400;
 }
 
+:host(.avatar-xsmall) ::slotted(i.ph) {
+  font-size: globals.$ion-scale-400;
+}
+
 :host(.avatar-small) ::slotted(ion-icon) {
   width: globals.$ion-scale-500;
   height: globals.$ion-scale-500;
 }
 
+:host(.avatar-small) ::slotted(i.ph) {
+  font-size: globals.$ion-scale-500;
+}
+
 :host(.avatar-medium) ::slotted(ion-icon) {
   width: globals.$ion-scale-600;
   height: globals.$ion-scale-600;
 }
 
+:host(.avatar-medium) ::slotted(i.ph) {
+  font-size: globals.$ion-scale-600;
+}
+
 :host(.avatar-large) ::slotted(ion-icon) {
   width: globals.$ion-scale-700;
   height: globals.$ion-scale-700;
 }
 
+:host(.avatar-large) ::slotted(i.ph) {
+  font-size: globals.$ion-scale-700;
+}
+
 :host(.avatar-xlarge) ::slotted(ion-icon) {
   width: globals.$ion-scale-800;
   height: globals.$ion-scale-800;
 }
 
+:host(.avatar-xlarge) ::slotted(i.ph) {
+  font-size: globals.$ion-scale-800;
+}
+
 // Avatar Badge Empty (hint)
 // --------------------------------------------------
 

core/src/components/badge/badge.ionic.scss

@@ -85,6 +85,10 @@
   height: globals.$ion-scale-300;
 }
 
+:host(.badge-small) ::slotted(i.ph) {
+  font-size: globals.$ion-scale-300;
+}
+
 /* Medium Badge */
 /* Large size defaults to the medium size to avoid styles breakage */
 :host(.badge-medium),
@@ -104,6 +108,11 @@
   height: globals.$ion-scale-400;
 }
 
+:host(.badge-medium) ::slotted(i.ph),
+:host(.badge-large) ::slotted(i.ph) {
+  font-size: globals.$ion-scale-400;
+}
+
 // Badge (hint)
 // --------------------------------------------------
 
@@ -173,4 +182,8 @@
     width: globals.$ion-scale-300;
     height: globals.$ion-scale-300;
   }
+
+  ::slotted(i.ph) {
+    font-size: globals.$ion-scale-300;
+  }
 }

core/src/components/button/button.ionic.scss

@@ -146,6 +146,12 @@
     width: globals.$ion-scale-500;
     height: globals.$ion-scale-500;
   }
+
+  ::slotted(i.ph[slot="start"]),
+  ::slotted(i.ph[slot="end"]),
+  ::slotted(i.ph[slot="icon-only"]) {
+    font-size: globals.$ion-scale-500;
+  }
 }
 
 :host(.button-large) {
@@ -155,6 +161,12 @@
     width: globals.$ion-scale-600;
     height: globals.$ion-scale-600;
   }
+
+  ::slotted(i.ph[slot="start"]),
+  ::slotted(i.ph[slot="end"]),
+  ::slotted(i.ph[slot="icon-only"]) {
+    font-size: globals.$ion-scale-600;
+  }
 }
 
 :host(.button-has-icon-only) {

core/src/components/chip/chip.ionic.scss

@@ -68,7 +68,8 @@
 
   font-size: globals.$ion-font-size-300;
 
-  ::slotted(ion-icon) {
+  ::slotted(ion-icon),
+  ::slotted(i.ph) {
     font-size: globals.$ion-font-size-300;
   }
 }
@@ -78,7 +79,8 @@
 
   font-size: globals.$ion-font-size-350;
 
-  ::slotted(ion-icon) {
+  ::slotted(ion-icon),
+  ::slotted(i.ph) {
     font-size: globals.$ion-font-size-400;
   }
 }

core/src/components/item-option/item-option.ionic.scss

@@ -42,6 +42,12 @@
   height: globals.$ion-scale-500;
 }
 
+::slotted(i.ph) {
+  @include globals.margin(0);
+
+  font-size: globals.$ion-scale-500;
+}
+
 // Item Option Shapes
 // --------------------------------------------------
 

core/src/components/item/item.ionic.scss

@@ -49,7 +49,8 @@ slot[name="end"]::slotted(*) {
   @include globals.margin(null, null, null, #{globals.$ion-space-400});
 }
 
-::slotted(ion-icon:not(.item-detail-icon)) {
+::slotted(ion-icon:not(.item-detail-icon)),
+::slotted(i.ph) {
   color: globals.$ion-primitives-neutral-1000;
 
   font-size: globals.$ion-scale-1000;

core/src/components/range/range.ionic.scss

@@ -34,7 +34,8 @@
   background: globals.current-color(base);
 }
 
-::slotted(ion-icon[slot]) {
+::slotted(ion-icon[slot]),
+::slotted(i.ph[slot]) {
   font-size: globals.$ion-font-size-600;
 }
 

core/src/components/segment-button/segment-button.ionic.scss

@@ -63,6 +63,10 @@
   height: globals.$ion-scale-600;
 }
 
+::slotted(i.ph) {
+  font-size: globals.$ion-scale-600;
+}
+
 // Segment Button: Checked
 // All slot content should have the checked color even when it's not label or icon
 // --------------------------------------------------

core/src/components/select/select.ionic.scss

@@ -214,6 +214,10 @@
 ::slotted(ion-icon) {
   width: globals.$ion-scale-400;
   height: globals.$ion-scale-400;
+
+  font-size: globals.$ion-scale-400;
+
+  line-height: 1;
 }
 
 .select-icon {

core/src/components/select/select.tsx

@@ -5,6 +5,7 @@ import type { NotchController } from '@utils/forms';
 import { compareOptions, createNotchController, isOptionSelected, checkInvalidState } from '@utils/forms';
 import { focusVisibleElement, renderHiddenInput, inheritAttributes } from '@utils/helpers';
 import type { Attributes } from '@utils/helpers';
+import { renderIcon } from '@utils/icon';
 import { printIonWarning } from '@utils/logging';
 import { actionSheetController, alertController, popoverController, modalController } from '@utils/overlays';
 import type { OverlaySelect } from '@utils/overlays-interface';
@@ -1107,14 +1108,14 @@ export class Select implements ComponentInterface {
    * next to the select text.
    */
   private renderSelectIcon() {
+    const theme = getIonTheme(this);
     const { isExpanded, selectExpandedIcon, selectCollapsedIcon } = this;
-    let icon = selectCollapsedIcon;
+    const icon = isExpanded ? selectExpandedIcon : selectCollapsedIcon;
 
-    if (isExpanded) {
-      icon = selectExpandedIcon;
-    }
+    // Use the font glyph for the default ionic icon; null forces SVG for custom icons.
+    const ionicIconClass = icon === caretDownRegular ? 'ph-caret-down' : null;
 
-    return <ion-icon class="select-icon" part="icon" aria-hidden="true" icon={icon}></ion-icon>;
+    return renderIcon(theme, ionicIconClass, icon, { class: { 'select-icon': true }, part: 'icon' });
   }
 
   private get ariaLabel() {

core/src/components/tab-button/tab-button.ionic.scss

@@ -84,6 +84,10 @@
   height: globals.$ion-scale-600;
 }
 
+::slotted(i.ph) {
+  font-size: globals.$ion-scale-600;
+}
+
 // Tab Button Shapes
 // -------------------------------------------------------------------------------
 

core/src/components/toggle/toggle.ionic.scss

@@ -115,6 +115,10 @@
 .toggle-inner .toggle-switch-icon {
   width: globals.$ion-scale-400;
   height: globals.$ion-scale-400;
+
+  font-size: globals.$ion-scale-400;
+
+  line-height: 1;
 }
 
 // Toggle Label Placement - Start/Default

core/src/components/toggle/toggle.tsx

@@ -5,6 +5,7 @@ import { Build, Component, Element, Event, Host, Prop, State, Watch, h } from '@
 import { checkInvalidState } from '@utils/forms';
 import { renderHiddenInput, inheritAriaAttributes } from '@utils/helpers';
 import type { Attributes } from '@utils/helpers';
+import { renderIcon } from '@utils/icon';
 import { hapticSelection } from '@utils/native/haptic';
 import { isPlatform } from '@utils/platform';
 import { isRTL } from '@utils/rtl';
@@ -402,29 +403,34 @@ export class Toggle implements ComponentInterface {
   }
 
   private renderOnOffSwitchLabels(checked: boolean) {
+    const theme = getIonTheme(this);
     const icon = this.getSwitchLabelIcon(checked);
 
-    return (
-      <ion-icon
-        class={{
-          'toggle-switch-icon': true,
-          'toggle-switch-icon-checked': checked,
-          /**
-           * The default checked icon is being modified with
-           * styling that causes it to rotate by 90 degrees
-           * when the theme is `ios`.
-           *
-           * To prevent any rotation on a custom icon that is
-           * set through the config, we need to apply a class
-           * that handles the styling only when the default
-           * checked icon is being used.
-           */
-          'toggle-switch-icon-checked-default': checked && icon === this.toggleDefaultCheckedIcon,
-        }}
-        icon={icon}
-        aria-hidden="true"
-      ></ion-icon>
-    );
+    // Map the ionic-theme default SVGs to their Phosphor class names.
+    // Pass null when a custom icon is configured so the SVG is always used.
+    const phosphorMap: Record<string, string> = {
+      [checkRegular]: 'ph-check',
+      [minusRegular]: 'ph-minus',
+    };
+    const ionicIconClass = phosphorMap[icon] ?? null;
+
+    return renderIcon(theme, ionicIconClass, icon, {
+      class: {
+        'toggle-switch-icon': true,
+        'toggle-switch-icon-checked': checked,
+        /**
+         * The default checked icon is being modified with
+         * styling that causes it to rotate by 90 degrees
+         * when the theme is `ios`.
+         *
+         * To prevent any rotation on a custom icon that is
+         * set through the config, we need to apply a class
+         * that handles the styling only when the default
+         * checked icon is being used.
+         */
+        'toggle-switch-icon-checked-default': checked && icon === this.toggleDefaultCheckedIcon,
+      },
+    });
   }
 
   private renderToggleControl() {

core/src/css/ionic/_phosphor.scss

@@ -0,0 +1,18 @@
+// Phosphor icon font declaration for the ionic theme.
+//
+// @font-face is a global browser resource — once declared here (in the ionic
+// bundle loaded at document level), the "Phosphor" font family is available
+// everywhere, including inside shadow DOM components.
+//
+// Glyph rendering is handled via String.fromCodePoint() in renderIcon (see
+// src/utils/icon.tsx), so no class selectors are needed here.
+//
+// Font files are copied from @phosphor-icons/web into css/fonts/ during build
+// (see scripts/copy-fonts.mjs). Paths here are relative to css/ionic/.
+@font-face {
+  font-family: "Phosphor";
+  src: url("../fonts/Phosphor.woff2") format("woff2"), url("../fonts/Phosphor.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}

core/src/css/ionic/bundle.ionic.scss

@@ -1,3 +1,6 @@
+// Phosphor icon font (ionic theme only)
+@use "./phosphor";
+
 // Core CSS, always required
 @forward "./core.ionic";