From 490097f2f132189be4603a1c4fbf5b84de376597 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Tue, 28 Jul 2026 16:47:39 -0400
Subject: [PATCH 1/4] chore(deps): update to latest ionicons
---
core/package-lock.json | 8 +++++---
core/package.json | 2 +-
2 files changed, 6 insertions(+), 4 deletions(-)
diff --git a/core/package-lock.json b/core/package-lock.json
index d5e316b9e9a..dc8ce55a0fb 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -10,7 +10,7 @@
"license": "MIT",
"dependencies": {
"@stencil/core": "^4.43.5",
- "ionicons": "^8.0.13",
+ "ionicons": "^8.1.0",
"tslib": "^2.1.0"
},
"devDependencies": {
@@ -5578,10 +5578,12 @@
}
},
"node_modules/ionicons": {
- "version": "8.0.13",
+ "version": "8.1.0",
+ "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-8.1.0.tgz",
+ "integrity": "sha512-XSM2gYWTXxSYTwjmKWAoy4yR7AbAFDjpc5ZIivAiGXskM0fe5CdMPfs6InQRUcrYtVb2WZ/0HQ1/jeh3JW78SA==",
"license": "MIT",
"dependencies": {
- "@stencil/core": "^4.35.3"
+ "@stencil/core": "^4.43.5"
}
},
"node_modules/is-alphabetical": {
diff --git a/core/package.json b/core/package.json
index 6b28bff1ede..28128bc2b78 100644
--- a/core/package.json
+++ b/core/package.json
@@ -67,7 +67,7 @@
],
"dependencies": {
"@stencil/core": "^4.43.5",
- "ionicons": "^8.0.13",
+ "ionicons": "^8.1.0",
"tslib": "^2.1.0"
},
"devDependencies": {
From 8525d59f79d6dc8ddad8f0187d5e26a1e989bb49 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Tue, 28 Jul 2026 16:50:13 -0400
Subject: [PATCH 2/4] test(icon): add font test with screenshots
---
.../src/components/icon/test/font/icon.e2e.ts | 34 +++
.../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 | 286 ++++++++++++++++++
5 files changed, 320 insertions(+)
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/src/components/icon/test/font/icon.e2e.ts b/core/src/components/icon/test/font/icon.e2e.ts
new file mode 100644
index 00000000000..cf3ef24e393
--- /dev/null
+++ b/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(
+ `
+
+
+
+
+
+
+
+ `,
+ config
+ );
+
+ await page.evaluate(() => document.fonts.ready);
+
+ 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
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Buttons: Phosphor Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Buttons: Ionicons
+
+
+
+
+
+
+
+
+
+
+
+
+ Items: Phosphor Icons
+
+
+
+
+ Phosphor Icon
+
+
+
+
+
+
+
+
+
+ Phosphor Icon
+
+
+
+
+
+ Items: Ionicons
+
+
+ Phosphor Icon
+
+
+
+
+
+ Phosphor Icon
+
+
+
+
+
+
+
+
From 68a7d63f9d23e4699c1e87c5564aa7e8d3c602d7 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Tue, 28 Jul 2026 16:50:23 -0400
Subject: [PATCH 3/4] docs(component-guide): add section on styling icons
---
docs/component-guide.md | 23 +++++++++++++++++++++++
1 file changed, 23 insertions(+)
diff --git a/docs/component-guide.md b/docs/component-guide.md
index 6f72aeec110..094606948b1 100644
--- a/docs/component-guide.md
+++ b/docs/component-guide.md
@@ -19,6 +19,7 @@
- [Converting Scoped to Shadow](#converting-scoped-to-shadow)
- [Sass Variables](#sass-variables)
- [CSS Shadow Parts](#css-shadow-parts)
+- [Icon Styling](#icon-styling)
- [RTL](#rtl)
- [Adding New Components with Native Input Support](#adding-new-components-with-native-input-support)
* [Angular Integration](#angular-integration)
@@ -732,6 +733,28 @@ For guidelines on when to use Sass Variables, see the [Sass Guidelines](./sass-g
For guidelines on adding CSS shadow parts, see the [CSS Shadow Parts Guidelines](./shadow-parts-guidelines.md).
+## Icon Styling
+
+When sizing `` elements, use `font-size` instead of `width` and `height` properties. `` now supports both SVG icons and font-based icons (web fonts), and font icons only respond to `font-size`, not `width` and `height`.
+
+✅ **Correct**
+
+```scss
+::slotted(ion-icon) {
+ font-size: 24px;
+}
+```
+
+❌ **Incorrect**
+
+```scss
+// Don't do this
+::slotted(ion-icon) {
+ width: 24px;
+ height: 24px;
+}
+```
+
## RTL
When you need to support both LTR and RTL modes, try to avoid using values such as `left` and `right`. For certain CSS properties, you can use the appropriate mixin to have this handled for you automatically.
From b3387c9a905a70b545221fba9a4c4594f5a83f2e Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Tue, 28 Jul 2026 17:07:51 -0400
Subject: [PATCH 4/4] refactor(many): convert icon width/height style rules to
font-size
---
core/src/components/input/input.ios.scss | 3 +--
core/src/components/input/input.md.scss | 3 +--
.../components/select-option/select-option.ios.overlay.scss | 3 +--
.../src/components/select-option/select-option.md.overlay.scss | 3 +--
4 files changed, 4 insertions(+), 8 deletions(-)
diff --git a/core/src/components/input/input.ios.scss b/core/src/components/input/input.ios.scss
index d17929f7016..7bf1c071e47 100644
--- a/core/src/components/input/input.ios.scss
+++ b/core/src/components/input/input.ios.scss
@@ -10,8 +10,7 @@
}
.input-clear-icon ion-icon {
- width: 18px;
- height: 18px;
+ font-size: 18px;
}
// Input - Disabled
diff --git a/core/src/components/input/input.md.scss b/core/src/components/input/input.md.scss
index f00e98db39a..58eb7e183a5 100644
--- a/core/src/components/input/input.md.scss
+++ b/core/src/components/input/input.md.scss
@@ -16,8 +16,7 @@
}
.input-clear-icon ion-icon {
- width: 22px;
- height: 22px;
+ font-size: 22px;
}
// Input - Disabled
diff --git a/core/src/components/select-option/select-option.ios.overlay.scss b/core/src/components/select-option/select-option.ios.overlay.scss
index 4cecfc471eb..45b5399720a 100644
--- a/core/src/components/select-option/select-option.ios.overlay.scss
+++ b/core/src/components/select-option/select-option.ios.overlay.scss
@@ -29,8 +29,7 @@
// Icon
.select-option-start > ion-icon,
.select-option-end > ion-icon {
- width: 28px;
- height: 28px;
+ font-size: 28px;
}
// Select Option: Action Sheet
diff --git a/core/src/components/select-option/select-option.md.overlay.scss b/core/src/components/select-option/select-option.md.overlay.scss
index 4720d9710ea..409902db6e1 100644
--- a/core/src/components/select-option/select-option.md.overlay.scss
+++ b/core/src/components/select-option/select-option.md.overlay.scss
@@ -19,8 +19,7 @@
// Icon
.select-option-start > ion-icon,
.select-option-end > ion-icon {
- width: 24px;
- height: 24px;
+ font-size: 24px;
}
// Image / SVG / Thumbnail