diff --git a/core/package-lock.json b/core/package-lock.json
index f73c4fa715e..d77f213b229 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.11784821417.1c794397",
"tslib": "^2.1.0"
},
"devDependencies": {
@@ -6003,10 +6003,12 @@
}
},
"node_modules/ionicons": {
- "version": "8.0.13",
+ "version": "8.0.14-dev.11784821417.1c794397",
+ "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-8.0.14-dev.11784821417.1c794397.tgz",
+ "integrity": "sha512-wov931INs5javx45ChlbEAUPqtdqKG/F8nlZzAYXzF86gtQMoLdHlcxBiIV+eQ9/fmwgdwvYlOn6YCvEGjaoZQ==",
"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 21ca7f138b5..65408effef8 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.11784821417.1c794397",
"tslib": "^2.1.0"
},
"devDependencies": {
diff --git a/core/src/components/avatar/avatar.ionic.scss b/core/src/components/avatar/avatar.ionic.scss
index 11ffcdc881a..9e296ecaa14 100644
--- a/core/src/components/avatar/avatar.ionic.scss
+++ b/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)
diff --git a/core/src/components/badge/badge.ionic.scss b/core/src/components/badge/badge.ionic.scss
index 4342c2b51d3..94fd478c8bf 100644
--- a/core/src/components/badge/badge.ionic.scss
+++ b/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;
}
}
diff --git a/core/src/components/badge/badge.ios.scss b/core/src/components/badge/badge.ios.scss
index 2d61ad713f9..ec175f59c67 100644
--- a/core/src/components/badge/badge.ios.scss
+++ b/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;
}
diff --git a/core/src/components/badge/badge.native.scss b/core/src/components/badge/badge.native.scss
index 0afa59779d6..746723dc9f3 100644
--- a/core/src/components/badge/badge.native.scss
+++ b/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;
}
}
diff --git a/core/src/components/button/button.ionic.scss b/core/src/components/button/button.ionic.scss
index 6958f06443f..669f214f786 100644
--- a/core/src/components/button/button.ionic.scss
+++ b/core/src/components/button/button.ionic.scss
@@ -143,8 +143,7 @@
::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;
}
}
@@ -152,8 +151,7 @@
::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;
}
}
diff --git a/core/src/components/buttons/buttons.ionic.scss b/core/src/components/buttons/buttons.ionic.scss
index e4df0bb0d37..31f7e76cc4f 100644
--- a/core/src/components/buttons/buttons.ionic.scss
+++ b/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;
}
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 00000000000..aa5c2eb2e6c
Binary files /dev/null and b/core/src/components/icon/test/font/icon.e2e.ts-snapshots/icon-font-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/icon/test/font/icon.e2e.ts-snapshots/icon-font-md-ltr-Mobile-Firefox-linux.png b/core/src/components/icon/test/font/icon.e2e.ts-snapshots/icon-font-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..e61391c16bd
Binary files /dev/null and b/core/src/components/icon/test/font/icon.e2e.ts-snapshots/icon-font-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/icon/test/font/icon.e2e.ts-snapshots/icon-font-md-ltr-Mobile-Safari-linux.png b/core/src/components/icon/test/font/icon.e2e.ts-snapshots/icon-font-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..5bf660c44c2
Binary files /dev/null and b/core/src/components/icon/test/font/icon.e2e.ts-snapshots/icon-font-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/icon/test/font/index.html b/core/src/components/icon/test/font/index.html
new file mode 100644
index 00000000000..8f1a6391601
--- /dev/null
+++ b/core/src/components/icon/test/font/index.html
@@ -0,0 +1,286 @@
+
+
+
+
+ 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
+
+
+
+
+
+
+
+
diff --git a/core/src/components/input/input.ionic.scss b/core/src/components/input/input.ionic.scss
index 83355427f3c..a9f5301e981 100644
--- a/core/src/components/input/input.ionic.scss
+++ b/core/src/components/input/input.ionic.scss
@@ -226,8 +226,7 @@
}
.input-clear-icon ion-icon {
- width: 100%;
- height: 100%;
+ font-size: globals.$ion-font-size-400;
}
/**
diff --git a/core/src/components/input/input.ios.scss b/core/src/components/input/input.ios.scss
index 8a62268e92b..84747bd236c 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 cb4bc54e3e6..2a796b35df2 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/item-option/item-option.ionic.scss b/core/src/components/item-option/item-option.ionic.scss
index 6ea452073db..c48237a75e4 100644
--- a/core/src/components/item-option/item-option.ionic.scss
+++ b/core/src/components/item-option/item-option.ionic.scss
@@ -36,10 +36,9 @@
::slotted([slot="icon-only"]) {
@include globals.margin(0);
- width: globals.$ion-scale-500;
-
min-width: initial;
- height: globals.$ion-scale-500;
+
+ font-size: globals.$ion-font-size-500;
}
// Item Option Shapes
diff --git a/core/src/components/searchbar/searchbar.ionic.scss b/core/src/components/searchbar/searchbar.ionic.scss
index 015437b743d..1aa973d0a57 100644
--- a/core/src/components/searchbar/searchbar.ionic.scss
+++ b/core/src/components/searchbar/searchbar.ionic.scss
@@ -28,8 +28,7 @@
// -----------------------------------------
.searchbar-search-icon {
- width: globals.$ion-scale-400;
- height: globals.$ion-scale-400;
+ font-size: globals.$ion-font-size-400;
}
// Searchbar Input Field
@@ -52,7 +51,7 @@
background-color: transparent;
- font-size: globals.$ion-scale-400;
+ font-size: globals.$ion-font-size-400;
contain: strict;
}
@@ -348,9 +347,7 @@
:host(.searchbar-size-large) .searchbar-cancel-button {
width: globals.$ion-scale-500;
height: globals.$ion-scale-500;
-}
-:host(.searchbar-size-large) .searchbar-cancel-button {
font-size: globals.$ion-font-size-500;
}
diff --git a/core/src/components/segment-button/segment-button.ionic.scss b/core/src/components/segment-button/segment-button.ionic.scss
index 0a69618e2fa..13fee96d126 100644
--- a/core/src/components/segment-button/segment-button.ionic.scss
+++ b/core/src/components/segment-button/segment-button.ionic.scss
@@ -59,8 +59,7 @@
// --------------------------------------------------
::slotted(ion-icon) {
- width: globals.$ion-scale-600;
- height: globals.$ion-scale-600;
+ font-size: globals.$ion-font-size-600;
}
// Segment Button: Checked
diff --git a/core/src/components/select-option/select-option.ionic.overlay.scss b/core/src/components/select-option/select-option.ionic.overlay.scss
index 746ec00594e..8d70fac5b77 100644
--- a/core/src/components/select-option/select-option.ionic.overlay.scss
+++ b/core/src/components/select-option/select-option.ionic.overlay.scss
@@ -42,19 +42,25 @@
* regardless of the content.
*/
-// Avatar / Image / SVG / Thumbnail / Icon
+// Avatar / Image / SVG / Thumbnail
.select-option-start > ion-avatar,
.select-option-start > ion-img,
.select-option-start > ion-thumbnail,
-.select-option-start > ion-icon,
.select-option-start > img,
.select-option-start > svg,
.select-option-end > ion-avatar,
.select-option-end > ion-img,
.select-option-end > ion-thumbnail,
-.select-option-end > ion-icon,
.select-option-end > img,
.select-option-end > svg {
width: globals.$ion-scale-1200;
height: globals.$ion-scale-1200;
}
+
+// Icon
+.select-option-start > ion-icon,
+.select-option-end > ion-icon {
+ // TODO(FW-6881): this should be $ion-font-size-1200 but that
+ // variable does not exist
+ font-size: globals.$ion-scale-1200;
+}
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 da95dd05fc3..9804209706d 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 ba72e243f39..f6cd875488b 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
diff --git a/core/src/components/select/select.ionic.scss b/core/src/components/select/select.ionic.scss
index 12c6a00ee1e..7f62e0603d1 100644
--- a/core/src/components/select/select.ionic.scss
+++ b/core/src/components/select/select.ionic.scss
@@ -213,8 +213,7 @@
.select-icon,
::slotted(ion-icon) {
- width: globals.$ion-scale-400;
- height: globals.$ion-scale-400;
+ font-size: globals.$ion-font-size-400;
}
.select-icon {
diff --git a/core/src/components/tab-button/tab-button.ionic.scss b/core/src/components/tab-button/tab-button.ionic.scss
index a2807831509..1e1896c80ee 100644
--- a/core/src/components/tab-button/tab-button.ionic.scss
+++ b/core/src/components/tab-button/tab-button.ionic.scss
@@ -80,8 +80,7 @@
// Icon
::slotted(ion-icon) {
- width: globals.$ion-scale-600;
- height: globals.$ion-scale-600;
+ font-size: globals.$ion-font-size-600;
}
// Tab Button Shapes