fix(icon): resolve font path and add i.ph sizing for ionic theme components

OS-susmitabhowmik · OS-susmitabhowmik · commit 9c0bb8be794d · 2026-04-27T18:05:25.000-06:00
diff --git a/core/package.json b/core/package.json
@@ -80,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",
diff --git a/core/scripts/copy-fonts.mjs b/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));
+});
diff --git a/core/src/components/avatar/avatar.ionic.scss b/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)
 // --------------------------------------------------
 
diff --git a/core/src/components/badge/badge.ionic.scss b/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;
+  }
 }
diff --git a/core/src/components/button/button.ionic.scss b/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) {
diff --git a/core/src/components/chip/chip.ionic.scss b/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;
   }
 }
diff --git a/core/src/components/item-option/item-option.ionic.scss b/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
 // --------------------------------------------------
 
diff --git a/core/src/components/item/item.ionic.scss b/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;
diff --git a/core/src/components/range/range.ionic.scss b/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;
 }
 
diff --git a/core/src/components/segment-button/segment-button.ionic.scss b/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
 // --------------------------------------------------
diff --git a/core/src/components/select/select.ionic.scss b/core/src/components/select/select.ionic.scss
@@ -216,7 +216,7 @@
   height: globals.$ion-scale-400;
 
   font-size: globals.$ion-scale-400;
-  
+
   line-height: 1;
 }
 
diff --git a/core/src/components/tab-button/tab-button.ionic.scss b/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
 // -------------------------------------------------------------------------------
 
diff --git a/core/src/components/toggle/toggle.ionic.scss b/core/src/components/toggle/toggle.ionic.scss
@@ -117,7 +117,7 @@
   height: globals.$ion-scale-400;
 
   font-size: globals.$ion-scale-400;
-  
+
   line-height: 1;
 }
 
diff --git a/core/src/css/ionic/_phosphor.scss b/core/src/css/ionic/_phosphor.scss
@@ -7,12 +7,12 @@
 // Glyph rendering is handled via String.fromCodePoint() in renderIcon (see
 // src/utils/icon.tsx), so no class selectors are needed here.
 //
-// Font paths are relative to the compiled output at css/ionic/bundle.ionic.css.
+// 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("../../node_modules/@phosphor-icons/web/src/regular/Phosphor.woff2") format("woff2"),
-    url("../../node_modules/@phosphor-icons/web/src/regular/Phosphor.woff") format("woff");
+  src: url("../fonts/Phosphor.woff2") format("woff2"),
+    url("../fonts/Phosphor.woff") format("woff");
   font-weight: normal;
   font-style: normal;
   font-display: block;

Original file line number	Diff line number	Diff line change
`@@ -146,6 +146,12 @@`
`146`	`146`	`width: globals.$ion-scale-500;`
`147`	`147`	`height: globals.$ion-scale-500;`
`148`	`148`	`}`
	`149`	`+`
	`150`	`+ ::slotted(i.ph[slot="start"]),`
	`151`	`+ ::slotted(i.ph[slot="end"]),`
	`152`	`+ ::slotted(i.ph[slot="icon-only"]) {`
	`153`	`+ font-size: globals.$ion-scale-500;`
	`154`	`+ }`
`149`	`155`	`}`
`150`	`156`
`151`	`157`	`:host(.button-large) {`
`@@ -155,6 +161,12 @@`
`155`	`161`	`width: globals.$ion-scale-600;`
`156`	`162`	`height: globals.$ion-scale-600;`
`157`	`163`	`}`
	`164`	`+`
	`165`	`+ ::slotted(i.ph[slot="start"]),`
	`166`	`+ ::slotted(i.ph[slot="end"]),`
	`167`	`+ ::slotted(i.ph[slot="icon-only"]) {`
	`168`	`+ font-size: globals.$ion-scale-600;`
	`169`	`+ }`
`158`	`170`	`}`
`159`	`171`
`160`	`172`	`:host(.button-has-icon-only) {`
Original file line number	Diff line number	Diff line change
`@@ -68,7 +68,8 @@`
`68`	`68`
`69`	`69`	`font-size: globals.$ion-font-size-300;`
`70`	`70`
`71`		`- ::slotted(ion-icon) {`
	`71`	`+ ::slotted(ion-icon),`
	`72`	`+ ::slotted(i.ph) {`
`72`	`73`	`font-size: globals.$ion-font-size-300;`
`73`	`74`	`}`
`74`	`75`	`}`
`@@ -78,7 +79,8 @@`
`78`	`79`
`79`	`80`	`font-size: globals.$ion-font-size-350;`
`80`	`81`
`81`		`- ::slotted(ion-icon) {`
	`82`	`+ ::slotted(ion-icon),`
	`83`	`+ ::slotted(i.ph) {`
`82`	`84`	`font-size: globals.$ion-font-size-400;`
`83`	`85`	`}`
`84`	`86`	`}`
Original file line number	Diff line number	Diff line change
`@@ -49,7 +49,8 @@ slot[name="end"]::slotted(*) {`
`49`	`49`	`@include globals.margin(null, null, null, #{globals.$ion-space-400});`
`50`	`50`	`}`
`51`	`51`
`52`		`-::slotted(ion-icon:not(.item-detail-icon)) {`
	`52`	`+::slotted(ion-icon:not(.item-detail-icon)),`
	`53`	`+::slotted(i.ph) {`
`53`	`54`	`color: globals.$ion-primitives-neutral-1000;`
`54`	`55`
`55`	`56`	`font-size: globals.$ion-scale-1000;`
Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,8 @@`
`34`	`34`	`background: globals.current-color(base);`
`35`	`35`	`}`
`36`	`36`
`37`		`-::slotted(ion-icon[slot]) {`
	`37`	`+::slotted(ion-icon[slot]),`
	`38`	`+::slotted(i.ph[slot]) {`
`38`	`39`	`font-size: globals.$ion-font-size-600;`
`39`	`40`	`}`
`40`	`41`