feat(icon): add font icon support to ion-icon

core/package.json

@@ -36,7 +36,7 @@
   "dependencies": {
     "@phosphor-icons/core": "^2.1.1",
     "@stencil/core": "4.43.5",
-    "ionicons": "^8.0.13",
+    "ionicons": "^8.0.14-dev.11784821417.1c794397",
     "tslib": "^2.1.0"
   },
   "devDependencies": {

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

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

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

@@ -81,8 +81,7 @@
 }
 
 :host(.badge-small) ::slotted(ion-icon) {
-  width: globals.$ion-scale-300;
-  height: globals.$ion-scale-300;
+  font-size: globals.$ion-font-size-300;
 }
 
 /* Medium Badge */
@@ -100,8 +99,7 @@
 
 :host(.badge-medium) ::slotted(ion-icon),
 :host(.badge-large) ::slotted(ion-icon) {
-  width: globals.$ion-scale-400;
-  height: globals.$ion-scale-400;
+  font-size: globals.$ion-font-size-400;
 }
 
 // Badge (hint)
@@ -170,7 +168,6 @@
   height: globals.$ion-scale-400;
 
   ::slotted(ion-icon) {
-    width: globals.$ion-scale-300;
-    height: globals.$ion-scale-300;
+    font-size: globals.$ion-font-size-300;
   }
 }

core/src/components/badge/badge.ios.scss

@@ -31,8 +31,7 @@
 
   position: absolute;
 
-  width: $badge-ios-in-tab-button-icon-size;
-  height: $badge-ios-in-tab-button-icon-size;
-
   transform: translate(-50%, -50%);
+
+  font-size: $badge-ios-in-tab-button-icon-size;
 }

core/src/components/badge/badge.native.scss

@@ -58,7 +58,6 @@
   line-height: $badge-line-height-in-button;
 
   ::slotted(ion-icon) {
-    width: $badge-icon-size-in-button;
-    height: $badge-icon-size-in-button;
+    font-size: $badge-icon-size-in-button;
   }
 }

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

@@ -143,17 +143,15 @@
   ::slotted(ion-icon[slot="start"]),
   ::slotted(ion-icon[slot="end"]),
   ::slotted(ion-icon[slot="icon-only"]) {
-    width: globals.$ion-scale-500;
-    height: globals.$ion-scale-500;
+    font-size: globals.$ion-font-size-500;
   }
 }
 
 :host(.button-large) {
   ::slotted(ion-icon[slot="start"]),
   ::slotted(ion-icon[slot="end"]),
   ::slotted(ion-icon[slot="icon-only"]) {
-    width: globals.$ion-scale-600;
-    height: globals.$ion-scale-600;
+    font-size: globals.$ion-font-size-600;
   }
 }
 

core/src/components/buttons/buttons.ionic.scss

@@ -29,5 +29,5 @@
 }
 
 ::slotted(*) ion-icon[slot="icon-only"] {
-  font-size: globals.$ion-font-size-600;
+  font-size: globals.$ion-font-size-500;
 }

core/src/components/icon/test/font/icon.e2e.ts

@@ -0,0 +1,34 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('icon: font'), () => {
+    test('should render font icon when passed', async ({ page }) => {
+      await page.setContent(
+        `
+        <link
+          rel="stylesheet"
+          type="text/css"
+          href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/fill/style.css"
+        />
+
+        <style>
+          ion-icon {
+            font-size: 32px;
+          }
+        </style>
+
+        <ion-icon>
+          <i class="ph-fill ph-house"></i>
+        </ion-icon>
+      `,
+        config
+      );
+
+      await page.evaluate(() => document.fonts.ready);
+
+      const icon = page.locator('ion-icon');
+      await expect(icon).toHaveScreenshot(screenshot(`icon-font`));
+    });
+  });
+});