From f3cfa0a32823a4ce47777c01084aeb7360e9e77c Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Fri, 10 Jul 2026 17:56:12 -0400
Subject: [PATCH 1/6] feat(icon): add font icon support to ionicons
---
core/package-lock.json | 6 +-
core/package.json | 2 +-
.../src/components/icon/test/font/icon.e2e.ts | 32 +++
.../icon-font-md-ltr-Mobile-Chrome-linux.png | Bin 0 -> 282 bytes
.../icon-font-md-ltr-Mobile-Firefox-linux.png | Bin 0 -> 316 bytes
.../icon-font-md-ltr-Mobile-Safari-linux.png | Bin 0 -> 294 bytes
core/src/components/icon/test/font/index.html | 225 ++++++++++++++++++
7 files changed, 262 insertions(+), 3 deletions(-)
create mode 100644 core/src/components/icon/test/font/icon.e2e.ts
create mode 100644 core/src/components/icon/test/font/icon.e2e.ts-snapshots/icon-font-md-ltr-Mobile-Chrome-linux.png
create mode 100644 core/src/components/icon/test/font/icon.e2e.ts-snapshots/icon-font-md-ltr-Mobile-Firefox-linux.png
create mode 100644 core/src/components/icon/test/font/icon.e2e.ts-snapshots/icon-font-md-ltr-Mobile-Safari-linux.png
create mode 100644 core/src/components/icon/test/font/index.html
diff --git a/core/package-lock.json b/core/package-lock.json
index ba23de94f30..2dd9e4aed55 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -11,7 +11,7 @@
"dependencies": {
"@phosphor-icons/core": "^2.1.1",
"@stencil/core": "4.43.5",
- "ionicons": "^8.0.13",
+ "ionicons": "^8.0.14-dev.11783720331.106aaaaa",
"tslib": "^2.1.0"
},
"devDependencies": {
@@ -6003,7 +6003,9 @@
}
},
"node_modules/ionicons": {
- "version": "8.0.13",
+ "version": "8.0.14-dev.11783720331.106aaaaa",
+ "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-8.0.14-dev.11783720331.106aaaaa.tgz",
+ "integrity": "sha512-fHjh6CqRkiHUoS4ptKF/ajBh+Ca+/+7fnLWYjvNBa9t2V1WgsBYQpnpYg1wl8m1WegBKI2bO3rVfn/ffmVioFw==",
"license": "MIT",
"dependencies": {
"@stencil/core": "^4.35.3"
diff --git a/core/package.json b/core/package.json
index 488cade703f..727a48d34fb 100644
--- a/core/package.json
+++ b/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.11783720331.106aaaaa",
"tslib": "^2.1.0"
},
"devDependencies": {
diff --git a/core/src/components/icon/test/font/icon.e2e.ts b/core/src/components/icon/test/font/icon.e2e.ts
new file mode 100644
index 00000000000..89dc6e96876
--- /dev/null
+++ b/core/src/components/icon/test/font/icon.e2e.ts
@@ -0,0 +1,32 @@
+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(
+ `
+
+
+
+
+
+
+
+ `,
+ config
+ );
+
+ const icon = page.locator('ion-icon');
+ await expect(icon).toHaveScreenshot(screenshot(`icon-font`));
+ });
+ });
+});
diff --git a/core/src/components/icon/test/font/icon.e2e.ts-snapshots/icon-font-md-ltr-Mobile-Chrome-linux.png b/core/src/components/icon/test/font/icon.e2e.ts-snapshots/icon-font-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..aa5c2eb2e6cda8bdd664422c81153aa7d4046e64
GIT binary patch
literal 282
zcmV+#0pcU+l9~5RMpW|Niz8ErgY!#*
zd7f|2@B;6W;0&f|>iga~_qeH|7>1#3TcnYYqL9wv1z++4al{30^t}#Bpzm@}8Xb2~
zG97eK4jpk&COzt)eEMg{;v|pb*mYe3{pH|xhJ>4olU$ai)>`DHsw$<_wm?cLzLAi5
zs@L_O3#_$1h%p9iM4zJdcL^-MhI}?bUDumMP1CG5!D95kC^^@VqqzeB0RR8XlY348
g000I_L_t&o02}1gXA*{hI^ood
zzQPeDF${xoVj2QjmchENH2Wk?Q&^UTW`!XjgrMtBp#Sk85E@`Lux%T}aZIy9-Aj^$
z<|DjpLj5BMXKfG&4g6mNMNz;!&$LT*@;rxWnrME8v({+f+XR81H*f>O#W1iG-%v3C
O0000St;KZP$H&<$p09Xc{c2a=p6^ABEXF*{GbCMDl$eZ@W!z6L58&Z=ytPB=K-3<#
ziM$?1mv-nlE|DR
zFGlGza8>N>n;Nv`Da%gg`)%q8;RkHamsmUYr_WLobSU9EWWO`*t>N|uEPu=nNC?LY
oRO?6XwrHC_@BQtj{me0pM^w*!+;+6~GSF`fp00i_>zopr08O27eE
+
+
+
+ Icon - Font
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Icon - Font
+
+
+
+
+ Phosphor icons: regular
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Phosphor icons: fill
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Phosphor icons: color
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Phosphor icons: custom sizing
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
From 69e144d1c69779a74b664ec1573ba954e0cc0321 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Wed, 15 Jul 2026 12:08:55 -0400
Subject: [PATCH 2/6] test(icon): add examples inside buttons and items
---
core/src/components/icon/test/font/index.html | 183 ++++++++++++------
1 file changed, 122 insertions(+), 61 deletions(-)
diff --git a/core/src/components/icon/test/font/index.html b/core/src/components/icon/test/font/index.html
index 5cf3e8d6611..8f1a6391601 100644
--- a/core/src/components/icon/test/font/index.html
+++ b/core/src/components/icon/test/font/index.html
@@ -34,176 +34,242 @@
Phosphor icons: regular
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
Phosphor icons: fill
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
Phosphor icons: color
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
-
+
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
Phosphor icons: custom sizing
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
-
+
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
+
+ Buttons: Phosphor Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Buttons: Ionicons
+
+
+
+
+
+
+
+
+
+
+
+
+ Items: Phosphor Icons
+
+
+
+
+ Phosphor Icon
+
+
+
+
+
+
+
+
+
+ Phosphor Icon
+
+
+
+
+
+ Items: Ionicons
+
+
+ Phosphor Icon
+
+
+
+
+
+ Phosphor Icon
+
+
@@ -215,11 +281,6 @@ Phosphor icons: custom sizing
font-weight: bold;
margin-top: 24px;
}
-
- /* Increase icon size to see icons better */
- ion-icon {
- font-size: 32px;
- }