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": { 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.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 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.