diff --git a/BREAKING.md b/BREAKING.md
index 2c034b42598..c94a4c10393 100644
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -18,6 +18,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
- [Components](#version-10x-components)
- [Button](#version-10x-button)
- [Card](#version-10x-card)
+ - [Checkbox](#version-10x-checkbox)
- [Chip](#version-10x-chip)
- [Datetime](#version-10x-datetime)
- [Grid](#version-10x-grid)
@@ -63,6 +64,29 @@ This is a comprehensive list of the breaking changes introduced in the major ver
}
```
+
Checkbox
+
+- The `container` CSS shadow part is now the element that wraps the checkmark instead of the `svg` element that draws it. The part still controls the checkbox's size, border, and background, so existing styles for those properties are unaffected.
+
+ SVG-specific properties such as `fill`, `stroke` and `stroke-width` no longer have any effect through `::part(container)` because `container` is no longer an SVG element. To set the color of the checkmark, use the `icon` part instead:
+
+ ```diff
+ - ion-checkbox::part(container) {
+ - stroke: purple;
+ - }
+ + ion-checkbox::part(icon) {
+ + color: purple;
+ + }
+ ```
+
+ The `--checkmark-color` CSS variable can also be used to set the checkmark color. Both `::part(icon)` and `--checkmark-color` apply to the default checkmark as well as to an icon set with the `checkboxCheckedIcon` or `checkboxIndeterminateIcon` global config options. In contrast, the `mark` part only applies to states that do not have a configured icon.
+
+ Setting `color` on the `container` part has no effect because the icon sets its own color.
+
+ To change the thickness of the default checkmark, use the `--checkmark-width` CSS variable or set `stroke-width` on the `mark` part. These apply to each state (`checked` and `indeterminate`) unless an icon is configured for that state. For example, when `checkboxCheckedIcon` is configured, these properties do not apply to the checked state but continue to apply to the indeterminate state. Similarly, when `checkboxIndeterminateIcon` is configured, they do not apply to the indeterminate state but continue to apply to the checked state.
+
+ For a configured Ionicon drawn with a stroke, set `--ionicon-stroke-width` on the `icon` part. For a configured SVG, set `stroke-width` on the `icon` part; this applies unless the SVG sets its own `stroke-width`.
+
Chip
- The `border-radius` of the `ios` and `md` chip now defaults to `10px` and `8px`, respectively, instead of `16px` in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"round"`, or override the `--border-radius` CSS variable to specify a different value.
diff --git a/core/api.txt b/core/api.txt
index d1566881299..5d12fba32c3 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -565,6 +565,7 @@ ion-checkbox,css-prop,--border-style,md
ion-checkbox,css-prop,--border-width,ionic
ion-checkbox,css-prop,--border-width,ios
ion-checkbox,css-prop,--border-width,md
+ion-checkbox,css-prop,--checkbox-background,ionic
ion-checkbox,css-prop,--checkbox-background,ios
ion-checkbox,css-prop,--checkbox-background,md
ion-checkbox,css-prop,--checkbox-background-checked,ionic
@@ -573,7 +574,6 @@ ion-checkbox,css-prop,--checkbox-background-checked,md
ion-checkbox,css-prop,--checkmark-color,ionic
ion-checkbox,css-prop,--checkmark-color,ios
ion-checkbox,css-prop,--checkmark-color,md
-ion-checkbox,css-prop,--checkmark-height,ionic
ion-checkbox,css-prop,--checkmark-width,ionic
ion-checkbox,css-prop,--checkmark-width,ios
ion-checkbox,css-prop,--checkmark-width,md
@@ -589,6 +589,7 @@ ion-checkbox,css-prop,--transition,md
ion-checkbox,part,container
ion-checkbox,part,error-text
ion-checkbox,part,helper-text
+ion-checkbox,part,icon
ion-checkbox,part,label
ion-checkbox,part,mark
ion-checkbox,part,supporting-text
diff --git a/core/package-lock.json b/core/package-lock.json
index 12aa33cdfe4..e70c81ee58e 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -9,7 +9,6 @@
"version": "9.0.2",
"license": "MIT",
"dependencies": {
- "@phosphor-icons/core": "^2.1.1",
"@stencil/core": "^4.44.2",
"ionicons": "^8.1.0",
"tslib": "^2.1.0"
@@ -2178,12 +2177,6 @@
"node": ">= 8"
}
},
- "node_modules/@phosphor-icons/core": {
- "version": "2.1.1",
- "resolved": "https://registry.npmjs.org/@phosphor-icons/core/-/core-2.1.1.tgz",
- "integrity": "sha512-v4ARvrip4qBCImOE5rmPUylOEK4iiED9ZyKjcvzuezqMaiRASCHKcRIuvvxL/twvLpkfnEODCOJp5dM4eZilxQ==",
- "license": "MIT"
- },
"node_modules/@playwright/test": {
"version": "1.62.1",
"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.62.1.tgz",
diff --git a/core/package.json b/core/package.json
index fd8bc368617..488ae4a362e 100644
--- a/core/package.json
+++ b/core/package.json
@@ -66,7 +66,6 @@
"loader/"
],
"dependencies": {
- "@phosphor-icons/core": "^2.1.1",
"@stencil/core": "^4.44.2",
"ionicons": "^8.1.0",
"tslib": "^2.1.0"
diff --git a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 3fce761ee2c..dd04531ef7d 100644
Binary files a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 1d1ab6ec0aa..cc0ffe710a0 100644
Binary files a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png
index 3f7ceeeaed2..0767252c319 100644
Binary files a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Chrome-linux.png
index cef9f546adb..adfe984e89f 100644
Binary files a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 589022e296a..5ebca269e25 100644
Binary files a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Safari-linux.png
index b4a912ee323..11e5fb7b5c3 100644
Binary files a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 14d4329a95c..00ea55a37ef 100644
Binary files a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png
index a925225677b..776cfbf4ee7 100644
Binary files a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png
index 67f7f10764d..e24e40d4213 100644
Binary files a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Chrome-linux.png
index d80a088ae2d..980ac8aca77 100644
Binary files a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Firefox-linux.png
index f56169eb633..7d8f96dfba6 100644
Binary files a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Safari-linux.png
index 9b2f7acfdd5..82f8ee4cfc4 100644
Binary files a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png
index d342fabe6b1..8747f15770b 100644
Binary files a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png
index aa2de569a9c..74235842362 100644
Binary files a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png
index 0fb90605bd7..fc460ccb801 100644
Binary files a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 1a8d5c00709..0d58e5e13e0 100644
Binary files a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 03bb7b1d6e6..8c81cd86003 100644
Binary files a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png
index f349a6bf812..1d1926e625e 100644
Binary files a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 67fdc29b5ed..11280710c2f 100644
Binary files a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png
index ccee17627b7..d7a46b3cd0d 100644
Binary files a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png
index 5397acecc31..3931d3da844 100644
Binary files a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion-group/test/states/accordion-group.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion-group/test/states/accordion-group.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png
index d00f2f7c63b..6e5ffd1c45b 100644
Binary files a/core/src/components/accordion-group/test/states/accordion-group.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion-group/test/states/accordion-group.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion-group/test/states/accordion-group.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion-group/test/states/accordion-group.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 76ad15af97a..8ece8681d26 100644
Binary files a/core/src/components/accordion-group/test/states/accordion-group.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion-group/test/states/accordion-group.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion-group/test/states/accordion-group.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion-group/test/states/accordion-group.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png
index f593bcbef93..b8eef8fc612 100644
Binary files a/core/src/components/accordion-group/test/states/accordion-group.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion-group/test/states/accordion-group.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion/accordion.tsx b/core/src/components/accordion/accordion.tsx
index dcfa11029ac..87a475d9afe 100644
--- a/core/src/components/accordion/accordion.tsx
+++ b/core/src/components/accordion/accordion.tsx
@@ -1,4 +1,3 @@
-import caretDownRegular from '@phosphor-icons/core/assets/regular/caret-down.svg';
import type { ComponentInterface } from '@stencil/core';
import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
import { addEventListener, getElementRoot, raf, removeEventListener, transitionEndAsync } from '@utils/helpers';
@@ -242,25 +241,19 @@ export class Accordion implements ComponentInterface {
button.setAttribute('aria-expanded', `${expanded}`);
};
- get accordionToggleIcon() {
+ /**
+ * Get the icon to use for the toggle icon.
+ * If an icon is set on the component, use that.
+ * Otherwise, use the icon set in the config.
+ * If no icon is set in the config, use the default icon.
+ */
+ get accordionToggleIcon(): string {
// Return the icon if it is explicitly set
if (this.toggleIcon != null) {
return this.toggleIcon;
}
- // Determine the theme and map to default icons
- const theme = getIonTheme(this);
- const defaultIcons = {
- ios: chevronDown,
- ionic: caretDownRegular,
- md: chevronDown,
- };
-
- // Get the default icon based on the theme, falling back to 'md' icon if necessary
- const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-
- // Return the configured accordion toggle icon or the default icon
- return config.get('accordionToggleIcon', defaultIcon);
+ return config.get('accordionToggleIcon', chevronDown);
}
private slotToggleIcon = () => {
diff --git a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 3fce761ee2c..dd04531ef7d 100644
Binary files a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 1d1ab6ec0aa..cc0ffe710a0 100644
Binary files a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-ltr-light-Mobile-Safari-linux.png
index 3f7ceeeaed2..0767252c319 100644
Binary files a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 82c1a08d3fc..5300bcecda0 100644
Binary files a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 895e3adb2c0..18b375b7fd1 100644
Binary files a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-rtl-light-Mobile-Safari-linux.png
index 9c2f6a4e70b..9aecbdfa216 100644
Binary files a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 096c4497b1b..d658da631ba 100644
Binary files a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 8080864c5ab..f10dc5eeb31 100644
Binary files a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Safari-linux.png
index 8b73a009fa9..9b69f4d467e 100644
Binary files a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 0bbd27da2bb..83ee24a2869 100644
Binary files a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Firefox-linux.png
index b9cd2a2f159..49f9d8c56b2 100644
Binary files a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Safari-linux.png
index 1c57650ae7b..11e387f11bf 100644
Binary files a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 456375b705d..5018c6d6d47 100644
Binary files a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 92bc0f1982b..09cab28082e 100644
Binary files a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Safari-linux.png
index a9cfc7fb2d7..e0e559982bd 100644
Binary files a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-child-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-child-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png
index f3dbdd67c0b..8046c26c5a8 100644
Binary files a/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-child-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-child-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-child-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-child-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png
index e40b9efa414..bd0b59ca56a 100644
Binary files a/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-child-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-child-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-child-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-child-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png
index 3f00b180ac3..a6e2a6d6f1f 100644
Binary files a/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-child-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-child-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-nested-enabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-nested-enabled-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 5bc7bf24e22..97940aee3f2 100644
Binary files a/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-nested-enabled-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-nested-enabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-nested-enabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-nested-enabled-ionic-md-ltr-light-Mobile-Firefox-linux.png
index d1c02a8a22b..60e675b4ed2 100644
Binary files a/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-nested-enabled-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-nested-enabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-nested-enabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-nested-enabled-ionic-md-ltr-light-Mobile-Safari-linux.png
index 22c02743996..69f3410f512 100644
Binary files a/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-nested-enabled-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-nested-enabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-parent-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-parent-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png
index e881bbd8735..02ef4dd4b9a 100644
Binary files a/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-parent-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-parent-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-parent-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-parent-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png
index d92a1d29d0c..0d5e7396a78 100644
Binary files a/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-parent-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-parent-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-parent-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-parent-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png
index 3f6350bc3f6..6be93245abc 100644
Binary files a/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-parent-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-parent-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 94ba19e0e4f..a167086732c 100644
Binary files a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png
index a65be70f432..8172cfed8a3 100644
Binary files a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png
index 49c01b2e47e..7dc34e9d03f 100644
Binary files a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 351361ad92c..ab0bf847c61 100644
Binary files a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png
index f36d468975e..256e6ca9ea3 100644
Binary files a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png
index 478b85a354e..f79a4b75dfa 100644
Binary files a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 4025ed4a095..4badbfd7c1f 100644
Binary files a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png
index e9b720cf876..b162a14f8f4 100644
Binary files a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png
index 7169e4ddc7d..aae7a56ecad 100644
Binary files a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-activated-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-activated-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 671932d1f35..7ec8b6b96fb 100644
Binary files a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-activated-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-activated-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-activated-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-activated-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 943c6cbbbd4..dbb35ed21e4 100644
Binary files a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-activated-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-activated-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-activated-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-activated-ionic-md-ltr-light-Mobile-Safari-linux.png
index a7a0a26aae7..7ef530055e6 100644
Binary files a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-activated-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-activated-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png
index b476b09786b..d21f1b092f4 100644
Binary files a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 2858c29a81f..8e304c04eeb 100644
Binary files a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png
index 053fd55e44a..19d33b30828 100644
Binary files a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png
index ca491a09b4d..04fe1e753be 100644
Binary files a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 4c5626e7d14..0198378a4fc 100644
Binary files a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-focused-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-focused-ionic-md-ltr-light-Mobile-Safari-linux.png
index f54c4ab7067..7144d25c388 100644
Binary files a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-focused-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-focused-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-activated-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-activated-ionic-md-ltr-light-Mobile-Chrome-linux.png
index b04e932d7f7..0e5a0ba0e94 100644
Binary files a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-activated-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-activated-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-activated-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-activated-ionic-md-ltr-light-Mobile-Firefox-linux.png
index f833cdb192f..988353d847e 100644
Binary files a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-activated-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-activated-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-activated-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-activated-ionic-md-ltr-light-Mobile-Safari-linux.png
index 48113b5086c..5d51a84a6b4 100644
Binary files a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-activated-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-activated-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png
index d93df496d35..30859e877b0 100644
Binary files a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 788ab06f987..ab69d6511b4 100644
Binary files a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png
index 996184bd208..02245c5aec8 100644
Binary files a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png
index bd196cc78ab..27e69ad1c0e 100644
Binary files a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 360c619d551..6a780f9edff 100644
Binary files a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-focused-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-focused-ionic-md-ltr-light-Mobile-Safari-linux.png
index 112d83b5fe9..861bcefc019 100644
Binary files a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-focused-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-focused-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/alert.ionic.scss b/core/src/components/alert/alert.ionic.scss
index 5d240ad2416..714b0321246 100644
--- a/core/src/components/alert/alert.ionic.scss
+++ b/core/src/components/alert/alert.ionic.scss
@@ -308,15 +308,6 @@
@include globals.position-horizontal(null, globals.$ion-space-400);
}
-.alert-checkbox-inner {
- width: globals.$ion-scale-400;
- height: globals.$ion-scale-400;
-}
-
-.alert-checkbox-inner path {
- fill: globals.$ion-bg-surface-default;
-}
-
// Ionic Alert Checkbox Checkmark: Checked
// --------------------------------------------------
@@ -326,6 +317,19 @@
background-color: globals.$ion-bg-primary-base-default;
}
+// The checkmark is a box clipped to the outline of the mark ion-checkbox
+// draws. It represents a two-segment polyline with a 3-unit stroke in a
+// 24-unit box. The polygon points trace the outer and inner edges of that
+// stroke and are derived from the checkmark's geometry.
+[aria-checked="true"] .alert-checkbox-inner {
+ width: globals.$ion-scale-400;
+ height: globals.$ion-scale-400;
+
+ background-color: globals.$ion-bg-surface-default;
+
+ clip-path: polygon(2.79% 58.21%, 33.75% 89.17%, 99.38% 23.54%, 90.54% 14.71%, 33.75% 71.49%, 11.63% 49.37%);
+}
+
// Ionic Alert Button
// --------------------------------------------------
diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
index 351c2c4349d..6fcc9e3063c 100644
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -650,13 +650,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
}}
>
- {theme === 'ionic' ? (
-
-
-
- ) : (
-
- )}
+
{renderOptionLabel(optionLabelOptions, 'alert-checkbox-label')}
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ionic-md-ltr-light-Mobile-Chrome-linux.png
index f9f5ca164bf..f456ef7646f 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 969b6d43107..08f77a1e89d 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ionic-md-ltr-light-Mobile-Safari-linux.png
index eaf873d6d2d..970b1827c3e 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 5b8f93e797a..4b04eb758cd 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ionic-md-rtl-light-Mobile-Firefox-linux.png
index eb415e37fd7..92e7983d277 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ionic-md-rtl-light-Mobile-Safari-linux.png
index 4c3d288fdd2..5c9031702f6 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-end-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-end-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 955a4bdf33d..9b722039310 100644
Binary files a/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-end-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-end-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-end-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-end-ionic-md-ltr-light-Mobile-Firefox-linux.png
index eeee98ebf84..fa4bc6c4835 100644
Binary files a/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-end-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-end-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-end-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-end-ionic-md-ltr-light-Mobile-Safari-linux.png
index 5946910a8da..98b2c962153 100644
Binary files a/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-end-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-end-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-end-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-end-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 47e93342d98..5099c59e95f 100644
Binary files a/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-end-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-end-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-end-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-end-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 35ec243c844..175118cc780 100644
Binary files a/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-end-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-end-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-end-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-end-ionic-md-rtl-light-Mobile-Safari-linux.png
index 65384eae83e..19de5705540 100644
Binary files a/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-end-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-end-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-start-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-start-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 1286e58cc4a..0bccc874c82 100644
Binary files a/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-start-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-start-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-start-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-start-ionic-md-ltr-light-Mobile-Firefox-linux.png
index bdeefb6088e..fe7824f955f 100644
Binary files a/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-start-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-start-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-start-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-start-ionic-md-ltr-light-Mobile-Safari-linux.png
index 48a7d0ee46f..311cf3047c5 100644
Binary files a/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-start-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-start-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-start-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-start-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 32ba7ed68ae..3d2054fea57 100644
Binary files a/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-start-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-start-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-start-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-start-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 6b06ffa6ac9..043f8b6aea2 100644
Binary files a/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-start-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-start-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-start-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-start-ionic-md-rtl-light-Mobile-Safari-linux.png
index 12c0466022d..dc3bf0ef68f 100644
Binary files a/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-start-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/alert/test/label-placement/alert.e2e.ts-snapshots/alert-label-checkbox-placement-start-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/states/alert.e2e.ts-snapshots/alert-checkbox-states-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/alert/test/states/alert.e2e.ts-snapshots/alert-checkbox-states-ionic-md-ltr-light-Mobile-Chrome-linux.png
index dbc003fe008..2a58262bf30 100644
Binary files a/core/src/components/alert/test/states/alert.e2e.ts-snapshots/alert-checkbox-states-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/alert/test/states/alert.e2e.ts-snapshots/alert-checkbox-states-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/states/alert.e2e.ts-snapshots/alert-checkbox-states-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/alert/test/states/alert.e2e.ts-snapshots/alert-checkbox-states-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 698434e695b..2923a226592 100644
Binary files a/core/src/components/alert/test/states/alert.e2e.ts-snapshots/alert-checkbox-states-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/alert/test/states/alert.e2e.ts-snapshots/alert-checkbox-states-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/states/alert.e2e.ts-snapshots/alert-checkbox-states-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/alert/test/states/alert.e2e.ts-snapshots/alert-checkbox-states-ionic-md-ltr-light-Mobile-Safari-linux.png
index 7d2dbd4a116..2388345273f 100644
Binary files a/core/src/components/alert/test/states/alert.e2e.ts-snapshots/alert-checkbox-states-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/alert/test/states/alert.e2e.ts-snapshots/alert-checkbox-states-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx
index 4c4d738fb7e..becb0598be5 100644
--- a/core/src/components/back-button/back-button.tsx
+++ b/core/src/components/back-button/back-button.tsx
@@ -1,4 +1,3 @@
-import caretLeftRegular from '@phosphor-icons/core/assets/regular/caret-left.svg';
import type { ComponentInterface } from '@stencil/core';
import { Component, Element, Host, Prop, h } from '@stencil/core';
import type { ButtonInterface } from '@utils/element-interface';
@@ -80,24 +79,22 @@ export class BackButton implements ComponentInterface, ButtonInterface {
}
}
- get backButtonIcon() {
+ /**
+ * Get the icon to use for the back button icon.
+ * If an icon is set on the component, use that.
+ * Otherwise, use the icon set in the config.
+ * If no icon is set in the config, use the default icon.
+ */
+ get backButtonIcon(): string {
// Return the icon if it is explicitly set
if (this.icon != null) {
return this.icon;
}
- // Determine the theme and map to default icons
+ // Determine the theme and map to the default icon
const theme = getIonTheme(this);
- const defaultIcons = {
- ios: chevronBack,
- ionic: caretLeftRegular,
- md: arrowBackSharp,
- };
-
- // Get the default icon based on the theme, falling back to 'md' icon if necessary
- const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+ const defaultIcon = theme === 'ios' ? chevronBack : arrowBackSharp;
- // Return the configured back button icon or the default icon
return config.get('backButtonIcon', defaultIcon);
}
@@ -106,8 +103,8 @@ export class BackButton implements ComponentInterface, ButtonInterface {
return this.text != null ? this.text : config.get('backButtonText', defaultBackButtonText);
}
- get hasIconOnly() {
- return this.backButtonIcon && !this.backButtonText;
+ get hasIconOnly(): boolean {
+ return !!this.backButtonIcon && !this.backButtonText;
}
get rippleType() {
diff --git a/core/src/components/breadcrumb/breadcrumb.tsx b/core/src/components/breadcrumb/breadcrumb.tsx
index 248b2e3f22c..29696b630fb 100644
--- a/core/src/components/breadcrumb/breadcrumb.tsx
+++ b/core/src/components/breadcrumb/breadcrumb.tsx
@@ -1,5 +1,3 @@
-import caretRightRegular from '@phosphor-icons/core/assets/regular/caret-right.svg';
-import dotsThreeRegular from '@phosphor-icons/core/assets/regular/dots-three.svg';
import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Prop, h } from '@stencil/core';
import type { Attributes } from '@utils/helpers';
@@ -135,36 +133,22 @@ export class Breadcrumb implements ComponentInterface {
this.inheritedAttributes = inheritAriaAttributes(this.el);
}
- get breadcrumbCollapsedIcon() {
- // Determine the theme and map to default icons
- const theme = getIonTheme(this);
- const defaultIcons = {
- ios: ellipsisHorizontal,
- ionic: dotsThreeRegular,
- md: ellipsisHorizontal,
- };
-
- // Get the default icon based on the theme, falling back to 'md' icon if necessary
- const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-
- // Return the configured breadcrumb collapsed icon or the default icon
- return config.get('breadcrumbCollapsedIcon', defaultIcon);
+ /**
+ * Get the icon to use for the collapsed icon.
+ * Use the icon set in the config.
+ * If no icon is set in the config, use the default icon.
+ */
+ get breadcrumbCollapsedIcon(): string {
+ return config.get('breadcrumbCollapsedIcon', ellipsisHorizontal);
}
- get breadcrumbSeparatorIcon() {
- // Determine the theme and map to default icons
- const theme = getIonTheme(this);
- const defaultIcons = {
- ios: chevronForwardOutline,
- ionic: caretRightRegular,
- md: chevronForwardOutline,
- };
-
- // Get the default icon based on the theme, falling back to 'md' icon if necessary
- const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-
- // Return the configured breadcrumb separator icon or the default icon
- return config.get('breadcrumbSeparatorIcon', defaultIcon);
+ /**
+ * Get the icon to use for the separator icon.
+ * Use the icon set in the config.
+ * If no icon is set in the config, use the default icon.
+ */
+ get breadcrumbSeparatorIcon(): string {
+ return config.get('breadcrumbSeparatorIcon', chevronForwardOutline);
}
private isClickable(): boolean {
diff --git a/core/src/components/checkbox/checkbox.common.scss b/core/src/components/checkbox/checkbox.common.scss
index 9a0f95c76c2..34649132295 100644
--- a/core/src/components/checkbox/checkbox.common.scss
+++ b/core/src/components/checkbox/checkbox.common.scss
@@ -7,6 +7,7 @@
/**
* @prop --size: Size of the checkbox icon
*
+ * @prop --checkbox-background: Background of the checkbox icon
* @prop --checkbox-background-checked: Background of the checkbox icon when checked
*
* @prop --border-color: Border color of the checkbox icon
@@ -18,7 +19,7 @@
* @prop --transition: Transition of the checkbox icon
*
* @prop --checkmark-color: Color of the checkbox checkmark when checked
- * @prop --checkmark-width: Stroke width of the checkbox checkmark
+ * @prop --checkmark-width: Stroke width of the checkbox checkmark. Only applies when no icon is set in the config.
*/
display: inline-block;
@@ -97,17 +98,52 @@ input {
}
.native-wrapper {
+ @include mixins.border-radius(var(--border-radius));
+
display: flex;
+ position: relative;
+
+ flex-shrink: 0;
+
align-items: center;
+
+ width: var(--size);
+ height: var(--size);
+
+ transition: var(--transition);
+
+ border-width: var(--border-width);
+ border-style: var(--border-style);
+ border-color: var(--border-color);
+
+ background: var(--checkbox-background);
+
+ box-sizing: border-box;
}
+// Checkbox Icon
+// ----------------------------------------------------------------
+
+/**
+ * Apply the color to the ion-icon container so that the default
+ * checkmark icon and any configured icon apply color consistently.
+ */
.checkbox-icon {
- position: relative;
+ color: var(--checkmark-color);
+
+ opacity: 0;
+}
+
+.checkbox-icon svg {
+ width: 100%;
+ height: 100%;
}
.checkbox-icon path {
- opacity: 0;
+ fill: none;
+ stroke: currentColor;
+ stroke-width: var(--checkmark-width);
}
// Checkbox Bottom Content
@@ -247,15 +283,15 @@ input {
// Checked / Indeterminate Checkbox
// ---------------------------------------------
-:host(.checkbox-checked) .checkbox-icon,
-:host(.checkbox-indeterminate) .checkbox-icon {
+:host(.checkbox-checked) .native-wrapper,
+:host(.checkbox-indeterminate) .native-wrapper {
border-color: var(--border-color-checked);
background: var(--checkbox-background-checked);
}
-:host(.checkbox-checked) .checkbox-icon path,
-:host(.checkbox-indeterminate) .checkbox-icon path {
+:host(.checkbox-checked) .checkbox-icon,
+:host(.checkbox-indeterminate) .checkbox-icon {
opacity: 1;
}
diff --git a/core/src/components/checkbox/checkbox.ionic.scss b/core/src/components/checkbox/checkbox.ionic.scss
index f19cb52acf2..8922f3c02df 100644
--- a/core/src/components/checkbox/checkbox.ionic.scss
+++ b/core/src/components/checkbox/checkbox.ionic.scss
@@ -6,8 +6,6 @@
:host {
/**
- * @prop --checkmark-height: Stroke height of the checkbox checkmark
- *
* @prop --focus-ring-color: Color of the focus ring
* @prop --focus-ring-width: Width of the focus ring
* @prop --focus-ring-offset: Offset of the focus ring
@@ -17,8 +15,7 @@
--border-width: #{globals.$ion-border-size-025};
--border-style: solid;
--border-color: #{globals.$ion-primitives-neutral-800};
- --checkmark-width: #{globals.$ion-scale-400};
- --checkmark-height: var(--checkmark-width);
+ --checkmark-width: 3;
// Focus
--focus-ring-color: #{globals.$ion-border-focus-default};
@@ -53,10 +50,6 @@
z-index: 1;
}
-
- .native-wrapper {
- position: relative;
- }
}
.label-text-wrapper {
@@ -80,33 +73,16 @@ input {
}
.native-wrapper {
- @include globals.border-radius(var(--border-radius));
-
- flex-shrink: 0;
-
justify-content: center;
-
- width: var(--size);
- height: var(--size);
-
- transition: var(--transition);
-
- border-width: var(--border-width);
- border-style: var(--border-style);
- border-color: var(--border-color);
-
- background: var(--checkbox-background);
-
- box-sizing: border-box;
}
-.checkbox-icon {
- width: var(--checkmark-width);
- height: var(--checkmark-height);
-}
+// Checkbox Icon
+// ----------------------------------------------------------------
-.checkbox-icon path {
- fill: var(--checkmark-color);
+// The mark is inset within the container, so it is
+// sized as a share of the container.
+.checkbox-icon {
+ font-size: calc(var(--size) * 2 / 3);
}
// Checkbox Hint Text
@@ -186,15 +162,6 @@ input {
--size: #{globals.$ion-scale-400};
}
-// Checked / Indeterminate Checkbox
-// ---------------------------------------------
-:host(.checkbox-checked) .native-wrapper,
-:host(.checkbox-indeterminate) .native-wrapper {
- border-color: var(--border-color-checked);
-
- background: var(--checkbox-background-checked);
-}
-
// Ionic Design Checkbox Invalid
// --------------------------------------------------
:host(.ion-invalid) {
@@ -236,9 +203,7 @@ input {
}
:host(:hover.checkbox-checked) .native-wrapper,
- :host(:hover.checkbox-checked) .checkbox-icon,
- :host(:hover.checkbox-indeterminate) .native-wrapper,
- :host(:hover.checkbox-indeterminate) .checkbox-icon {
+ :host(:hover.checkbox-indeterminate) .native-wrapper {
background-color: globals.$ion-semantics-primary-800;
}
}
@@ -257,9 +222,7 @@ input {
}
:host(.ion-activated.checkbox-checked) .native-wrapper,
-:host(.ion-activated.checkbox-checked) .checkbox-icon,
-:host(.ion-activated.checkbox-indeterminate) .native-wrapper,
-:host(.ion-activated.checkbox-indeterminate) .checkbox-icon {
+:host(.ion-activated.checkbox-indeterminate) .native-wrapper {
background-color: globals.$ion-bg-primary-base-press;
}
diff --git a/core/src/components/checkbox/checkbox.md.scss b/core/src/components/checkbox/checkbox.md.scss
index 80a28a5e91c..fe6c7b2ebba 100644
--- a/core/src/components/checkbox/checkbox.md.scss
+++ b/core/src/components/checkbox/checkbox.md.scss
@@ -22,6 +22,9 @@
--size: #{$checkbox-md-icon-size};
}
+// Checkbox Icon
+// --------------------------------------------------------
+
.checkbox-icon path {
stroke-dasharray: 30;
stroke-dashoffset: 30;
diff --git a/core/src/components/checkbox/checkbox.native.scss b/core/src/components/checkbox/checkbox.native.scss
index 2eb5c8859b2..e5e44fb36c3 100644
--- a/core/src/components/checkbox/checkbox.native.scss
+++ b/core/src/components/checkbox/checkbox.native.scss
@@ -6,9 +6,6 @@
// --------------------------------------------------
:host {
- /**
- * @prop --checkbox-background: Background of the checkbox icon
- */
--checkbox-background-checked: #{ion-color(primary, base)};
--border-color-checked: #{ion-color(primary, base)};
--checkmark-color: #{ion-color(primary, contrast)};
@@ -26,12 +23,6 @@
// Checkbox: Keyboard Focus
// ---------------------------------------------
-// The indicator is positioned against the wrapper, which is only made a
-// containing block here because the `ionic` theme draws its own ring instead.
-.native-wrapper {
- position: relative;
-}
-
:host(.ion-focused) .native-wrapper::after {
@include border-radius(50%);
@@ -70,27 +61,12 @@
@include margin(null, null, $checkbox-item-label-margin-bottom, null);
}
-.checkbox-icon {
- @include border-radius(var(--border-radius));
-
- width: var(--size);
- height: var(--size);
-
- transition: var(--transition);
-
- border-width: var(--border-width);
- border-style: var(--border-style);
- border-color: var(--border-color);
-
- background: var(--checkbox-background);
-
- box-sizing: border-box;
-}
+// Checkbox Icon
+// ----------------------------------------------------------------
-.checkbox-icon path {
- fill: none;
- stroke: var(--checkmark-color);
- stroke-width: var(--checkmark-width);
+.checkbox-icon {
+ width: 100%;
+ height: 100%;
}
// Checkbox Bottom Content
diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx
index e350b4fb7c0..6d0906d9e22 100644
--- a/core/src/components/checkbox/checkbox.tsx
+++ b/core/src/components/checkbox/checkbox.tsx
@@ -5,6 +5,7 @@ import type { Attributes } from '@utils/helpers';
import { inheritAriaAttributes, renderHiddenInput } from '@utils/helpers';
import { createColorClasses, hostContext } from '@utils/theme';
+import { config } from '../../global/config';
import { getIonTheme } from '../../global/ionic-global';
import type { Color, Theme } from '../../interface';
@@ -18,7 +19,8 @@ import type { CheckboxChangeEventDetail } from './checkbox-interface';
*
* @part container - The container for the checkbox mark.
* @part label - The label text describing the checkbox.
- * @part mark - The checkmark used to indicate the checked state.
+ * @part icon - The icon that displays the checked or indeterminate mark.
+ * @part mark - The mark used to indicate the checked or indeterminate state. Only applies when no icon is set in the config.
* @part supporting-text - Supporting text displayed beneath the checkbox label.
* @part helper-text - Supporting text displayed beneath the checkbox label when the checkbox is valid.
* @part error-text - Supporting text displayed beneath the checkbox label when the checkbox is invalid and touched.
@@ -296,6 +298,22 @@ export class Checkbox implements ComponentInterface {
ev.stopPropagation();
};
+ /**
+ * Get the icon to use for the checked icon.
+ * Use the icon set in the config.
+ */
+ get checkboxCheckedIcon(): string | undefined {
+ return config.get('checkboxCheckedIcon');
+ }
+
+ /**
+ * Get the icon to use for the indeterminate icon.
+ * Use the icon set in the config.
+ */
+ get checkboxIndeterminateIcon(): string | undefined {
+ return config.get('checkboxIndeterminateIcon');
+ }
+
private getHintTextId(): string | undefined {
const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
@@ -341,6 +359,8 @@ export class Checkbox implements ComponentInterface {
render() {
const {
color,
+ checkboxCheckedIcon,
+ checkboxIndeterminateIcon,
checked,
disabled,
el,
@@ -358,6 +378,7 @@ export class Checkbox implements ComponentInterface {
size,
} = this;
const theme = getIonTheme(this);
+ const markIcon = indeterminate ? checkboxIndeterminateIcon : checkboxCheckedIcon;
const path = getSVGPath(theme, indeterminate);
const inItem = hostContext('ion-item', el);
const inMultipleInputsItem = hostContext('ion-item.item-multiple-inputs', el);
@@ -424,16 +445,26 @@ export class Checkbox implements ComponentInterface {
{this.renderHintText()}
-
- {/* Phosphor Icons define a larger viewBox */}
-
+ {/*
+ If no icon is set in the config, the theme draws its own mark with
+ an inline SVG path so that it can be animated and sized with the
+ checkmark CSS properties. An icon set in the config renders inside
+ of the ion-icon instead, so the default checkmark svg is omitted
+ to prevent it from appearing while the icon loads. The key forces
+ a new element whenever the mark switches between the two, because
+ ion-icon keeps the content it last resolved even after its icon is
+ removed.
+ */}
+
- {path}
-
+ {!markIcon && {path} }
+
@@ -447,20 +478,12 @@ export class Checkbox implements ComponentInterface {
);
- if (theme === 'md') {
+ if (theme === 'md' || theme === 'ionic') {
path = indeterminate ? (
) : (
);
- } else if (theme === 'ionic') {
- path = indeterminate ? (
- // Phosphor Icon - minus bold
-
- ) : (
- // Phosphor Icon - check bold
-
- );
}
return path;
diff --git a/core/src/components/checkbox/test/a11y/checkbox.e2e.ts b/core/src/components/checkbox/test/a11y/checkbox.e2e.ts
index 989a7f97a96..ac5a83f06a9 100644
--- a/core/src/components/checkbox/test/a11y/checkbox.e2e.ts
+++ b/core/src/components/checkbox/test/a11y/checkbox.e2e.ts
@@ -2,11 +2,12 @@ import AxeBuilder from '@axe-core/playwright';
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';
-configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
- test.describe(title('checkbox: a11y'), () => {
- test('should not have accessibility violations', async ({ page }) => {
- await page.setContent(
- `
+configs({ directions: ['ltr'], modes: ['md', 'ios', 'ionic-md'], palettes: ['light', 'dark'] }).forEach(
+ ({ title, config }) => {
+ test.describe(title('checkbox: a11y'), () => {
+ test('should not have accessibility violations', async ({ page }) => {
+ await page.setContent(
+ `
Label
@@ -16,11 +17,35 @@ configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title,
`,
- config
- );
+ config
+ );
+
+ const results = await new AxeBuilder({ page }).analyze();
+ expect(results.violations).toEqual([]);
+ });
+ });
+ }
+);
+
+configs({ directions: ['ltr'], modes: ['md', 'ios', 'ionic-md'] }).forEach(({ title, config, screenshot }) => {
+ test.describe(title('checkbox: a11y'), () => {
+ test.describe(title('checkbox: font scaling'), () => {
+ test('should scale text on larger font sizes', async ({ page }) => {
+ await page.setContent(
+ `
+
+ Checked
+ `,
+ config
+ );
- const results = await new AxeBuilder({ page }).analyze();
- expect(results.violations).toEqual([]);
+ const checkbox = page.locator('ion-checkbox');
+ await expect(checkbox).toHaveScreenshot(screenshot('checkbox-scale'));
+ });
});
});
});
@@ -82,26 +107,3 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, config }) => {
});
});
});
-
-configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
- test.describe(title('checkbox: a11y'), () => {
- test.describe(title('checkbox: font scaling'), () => {
- test('should scale text on larger font sizes', async ({ page }) => {
- await page.setContent(
- `
-
- Checked
- `,
- config
- );
-
- const checkbox = page.locator('ion-checkbox');
- await expect(checkbox).toHaveScreenshot(screenshot('checkbox-scale'));
- });
- });
- });
-});
diff --git a/core/src/components/checkbox/test/a11y/checkbox.e2e.ts-snapshots/checkbox-scale-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/a11y/checkbox.e2e.ts-snapshots/checkbox-scale-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..fe498f191fa
Binary files /dev/null and b/core/src/components/checkbox/test/a11y/checkbox.e2e.ts-snapshots/checkbox-scale-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/a11y/checkbox.e2e.ts-snapshots/checkbox-scale-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/a11y/checkbox.e2e.ts-snapshots/checkbox-scale-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..b09ebed5e61
Binary files /dev/null and b/core/src/components/checkbox/test/a11y/checkbox.e2e.ts-snapshots/checkbox-scale-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/a11y/checkbox.e2e.ts-snapshots/checkbox-scale-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/checkbox/test/a11y/checkbox.e2e.ts-snapshots/checkbox-scale-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..1cfadf9368c
Binary files /dev/null and b/core/src/components/checkbox/test/a11y/checkbox.e2e.ts-snapshots/checkbox-scale-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts b/core/src/components/checkbox/test/basic/checkbox.e2e.ts
index f7e53deb4f1..8e26bccab3b 100644
--- a/core/src/components/checkbox/test/basic/checkbox.e2e.ts
+++ b/core/src/components/checkbox/test/basic/checkbox.e2e.ts
@@ -25,11 +25,6 @@ configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, conf
ion-checkbox {
--checkmark-width: 7;
}
-
- /* The ionic theme sets the width of the svg not stroke-width */
- ion-checkbox.ionic {
- --checkmark-width: 22px;
- }
Checkmark Width
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 1eaade11917..0c22b5653a7 100644
Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 523bdf77082..05972678664 100644
Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-ltr-light-Mobile-Safari-linux.png
index 113f3e1c65a..d2b2155e611 100644
Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png
index a2d7e78b02f..265ed7cdbb6 100644
Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 8c6294aef8c..75d28658c3e 100644
Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-rtl-light-Mobile-Safari-linux.png
index 25bc91ada03..0171727f94e 100644
Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-ltr-light-Mobile-Chrome-linux.png
index eef3eaed57d..76981040536 100644
Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-ltr-light-Mobile-Firefox-linux.png
index f9d609352c7..ca23ae72b60 100644
Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-ltr-light-Mobile-Safari-linux.png
index 4d1b7edf554..8ece5c83b96 100644
Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-rtl-light-Mobile-Chrome-linux.png
index b08a042e151..533a3ff7470 100644
Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 8dc8290fe45..24dc302e075 100644
Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-rtl-light-Mobile-Safari-linux.png
index 18b902b8b7f..774d1af9d55 100644
Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-md-rtl-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-md-rtl-Mobile-Chrome-linux.png
index b0f84aa3cca..f6240a58b55 100644
Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 2e5b59650a8..becc77e8cfc 100644
Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 99b785896bf..78597c7643a 100644
Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-ltr-light-Mobile-Safari-linux.png
index 5fcae24e7eb..27b28701749 100644
Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 3f565638a36..5405292ec90 100644
Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-rtl-light-Mobile-Firefox-linux.png
index e8b1cbbd6a2..9088599aa19 100644
Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-rtl-light-Mobile-Safari-linux.png
index e20d49d4566..8fa1cdfc1fa 100644
Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-small-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-small-ionic-md-ltr-light-Mobile-Safari-linux.png
index a309e33082b..e8485bce1ac 100644
Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-small-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-small-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/index.html b/core/src/components/checkbox/test/basic/index.html
index d78fa19d31f..05538a96695 100644
--- a/core/src/components/checkbox/test/basic/index.html
+++ b/core/src/components/checkbox/test/basic/index.html
@@ -27,11 +27,6 @@
--checkmark-width: 7;
}
- /* The ionic theme sets the width of the svg not stroke-width */
- .checkmark-width.ionic {
- --checkmark-width: 22px;
- }
-
hr {
background: #ddd;
}
diff --git a/core/src/components/checkbox/test/checkbox.spec.ts b/core/src/components/checkbox/test/checkbox.spec.ts
index e390d4d1b2e..483ce106e2f 100644
--- a/core/src/components/checkbox/test/checkbox.spec.ts
+++ b/core/src/components/checkbox/test/checkbox.spec.ts
@@ -1,5 +1,6 @@
import { newSpecPage } from '@stencil/core/testing';
+import { config } from '../../../global/config';
import { Checkbox } from '../checkbox';
describe('ion-checkbox: shadow parts', () => {
@@ -15,6 +16,7 @@ describe('ion-checkbox: shadow parts', () => {
expect(checkbox).toHaveShadowPart('container');
expect(checkbox).toHaveShadowPart('label');
+ expect(checkbox).toHaveShadowPart('icon');
expect(checkbox).toHaveShadowPart('mark');
});
});
@@ -84,3 +86,59 @@ describe('ion-checkbox: required', () => {
expect(nativeInput.hasAttribute('required')).toBeFalsy();
});
});
+
+describe('ion-checkbox: icon', () => {
+ beforeEach(() => {
+ config.reset({});
+ });
+
+ it('should slot the default svg when no icon is set in the config', async () => {
+ const page = await newSpecPage({
+ components: [Checkbox],
+ html: `
+ Checkbox
+ `,
+ });
+
+ const checkbox = page.body.querySelector('ion-checkbox')!;
+ const icon = checkbox.shadowRoot?.querySelector('.checkbox-icon')!;
+
+ expect(icon.tagName.toLowerCase()).toBe('ion-icon');
+ expect(icon.hasAttribute('icon')).toBe(false);
+ expect(icon.querySelector('svg path')).not.toBeNull();
+ });
+
+ it('should pass the checked icon set in the config to the icon', async () => {
+ config.reset({ checkboxCheckedIcon: 'custom-checked-icon' });
+
+ const page = await newSpecPage({
+ components: [Checkbox],
+ html: `
+ Checkbox
+ `,
+ });
+
+ const checkbox = page.body.querySelector('ion-checkbox')!;
+ const icon = checkbox.shadowRoot?.querySelector('.checkbox-icon')!;
+
+ expect(icon.getAttribute('icon')).toBe('custom-checked-icon');
+ expect(icon.querySelector('svg')).toBeNull();
+ });
+
+ it('should pass the indeterminate icon set in the config to the icon', async () => {
+ config.reset({ checkboxIndeterminateIcon: 'custom-indeterminate-icon' });
+
+ const page = await newSpecPage({
+ components: [Checkbox],
+ html: `
+ Checkbox
+ `,
+ });
+
+ const checkbox = page.body.querySelector('ion-checkbox')!;
+ const icon = checkbox.shadowRoot?.querySelector('.checkbox-icon')!;
+
+ expect(icon.getAttribute('icon')).toBe('custom-indeterminate-icon');
+ expect(icon.querySelector('svg')).toBeNull();
+ });
+});
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts
new file mode 100644
index 00000000000..eac4cdebcb8
--- /dev/null
+++ b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts
@@ -0,0 +1,88 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * Phosphor Icons ship as SVG files, so they are supplied to the config as a
+ * data URL. This is the `heart` icon at the `bold` weight.
+ */
+const phosphorHeart = `data:image/svg+xml;base64,${Buffer.from(
+ ' '
+).toString('base64')}`;
+
+/**
+ * The icons are set through the global config rather than on the component,
+ * so they are declared in the page content. An Ionicon name is used for the
+ * indeterminate icon to cover different accepted formats.
+ */
+const customIcons = `
+
+`;
+
+/**
+ * Only the indeterminate icon is set, so checking the checkbox falls back to
+ * the mark the theme draws. Setting both icons never reaches that fallback.
+ */
+const indeterminateIconOnly = `
+
+`;
+
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
+ test.describe(title('checkbox: custom icon'), () => {
+ /**
+ * The icon is always in the DOM and the checked state controls its opacity,
+ * so an unchecked checkbox must not show the icon set in the config.
+ */
+ test('should hide the checked icon set in the config when unchecked', async ({ page }) => {
+ await page.setContent(`${customIcons}Label `, config);
+
+ const checkbox = page.locator('ion-checkbox');
+ await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-custom-unchecked-icon`));
+ });
+
+ test('should render the checked icon set in the config', async ({ page }) => {
+ await page.setContent(`${customIcons}Label `, config);
+
+ const checkbox = page.locator('ion-checkbox');
+ await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-custom-checked-icon`));
+ });
+
+ test('should render the indeterminate icon set in the config', async ({ page }) => {
+ await page.setContent(`${customIcons}Label `, config);
+
+ const checkbox = page.locator('ion-checkbox');
+ await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-custom-indeterminate-icon`));
+ });
+
+ /**
+ * The icon element is reused across renders, and ion-icon keeps the content
+ * it last resolved, so a checkbox that has shown an icon can keep showing it
+ * after the state no longer has one set.
+ */
+ test('should render the theme mark after the state changes to one with no icon set', async ({ page }) => {
+ await page.setContent(`${indeterminateIconOnly}Label `, config);
+
+ const checkbox = page.locator('ion-checkbox');
+
+ await checkbox.click();
+ await expect(checkbox).toHaveClass(/checkbox-checked/);
+
+ await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-custom-indeterminate-icon-checked`));
+ });
+ });
+});
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-checked-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-checked-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..65b6eed62e7
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-checked-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-checked-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-checked-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..41fc31e9c17
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-checked-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-checked-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-checked-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f97d1d2126a
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-checked-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-checked-icon-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-checked-icon-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..8e1832d9651
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-checked-icon-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-checked-icon-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-checked-icon-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c458ca17381
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-checked-icon-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-checked-icon-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-checked-icon-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..12b0c7870b8
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-checked-icon-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-checked-icon-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-checked-icon-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..869e22111b9
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-checked-icon-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-checked-icon-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-checked-icon-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..59fab03391a
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-checked-icon-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-checked-icon-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-checked-icon-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..d666f54cd90
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-checked-icon-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-checked-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-checked-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..e9a52d192e8
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-checked-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..6e7b9ea9abc
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-checked-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-checked-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..8f4b3627b64
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-checked-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-checked-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-checked-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..4c2917007dc
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-checked-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-checked-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-checked-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..33be9c07284
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-checked-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-checked-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-checked-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..0653190bcec
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-checked-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-checked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-checked-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..219c93a2568
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-checked-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-checked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-checked-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4ab75cae494
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-checked-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-checked-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-checked-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..ba3c930620f
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-checked-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..ab7e9b0a33e
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..670adea3682
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..4e93826856e
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..e42fb8d31bc
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4e0a7f49f59
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..998944d0f0d
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..289684d59dd
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a28d465110e
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..af685a2567b
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-indeterminate-icon-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-unchecked-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-unchecked-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..3dabf4103e6
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-unchecked-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-unchecked-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-unchecked-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d1b9ce9a8d3
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-unchecked-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-unchecked-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-unchecked-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..b03299dff7c
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-unchecked-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-unchecked-icon-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-unchecked-icon-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..ff467a0bcbc
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-unchecked-icon-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-unchecked-icon-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-unchecked-icon-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..e02dda1c320
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-unchecked-icon-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-unchecked-icon-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-unchecked-icon-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f9bed0d3b2b
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-unchecked-icon-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-unchecked-icon-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-unchecked-icon-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..fc8ec892177
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-unchecked-icon-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-unchecked-icon-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-unchecked-icon-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..e7024703236
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-unchecked-icon-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-unchecked-icon-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-unchecked-icon-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..18f12ff171d
Binary files /dev/null and b/core/src/components/checkbox/test/custom-icon/checkbox.e2e.ts-snapshots/checkbox-custom-unchecked-icon-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/custom-icon/index.html b/core/src/components/checkbox/test/custom-icon/index.html
new file mode 100644
index 00000000000..1465da54709
--- /dev/null
+++ b/core/src/components/checkbox/test/custom-icon/index.html
@@ -0,0 +1,72 @@
+
+
+
+
+ Checkbox - Custom Icon
+
+
+
+
+
+
+
+
+
+
+
+ Checkbox - Custom Icon
+
+
+
+
+
+
+ Unchecked
+
+
+ Checked
+
+
+ Indeterminate
+
+
+
+
+
+
+
+
+
+
diff --git a/core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts b/core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts
index cb4e82c0a48..a04e88554b7 100644
--- a/core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts
+++ b/core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts
@@ -1,7 +1,10 @@
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('checkbox: indeterminate'), () => {
test('should not have visual regressions', async ({ page }) => {
await page.goto(`/src/components/checkbox/test/indeterminate`, config);
diff --git a/core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts-snapshots/checkbox-indeterminate-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts-snapshots/checkbox-indeterminate-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..74d12c16c84
Binary files /dev/null and b/core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts-snapshots/checkbox-indeterminate-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts-snapshots/checkbox-indeterminate-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts-snapshots/checkbox-indeterminate-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..efd17624a6a
Binary files /dev/null and b/core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts-snapshots/checkbox-indeterminate-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts-snapshots/checkbox-indeterminate-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts-snapshots/checkbox-indeterminate-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..9de6e59d7ac
Binary files /dev/null and b/core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts-snapshots/checkbox-indeterminate-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-active-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-active-ionic-md-ltr-light-Mobile-Chrome-linux.png
index c234b9cff4e..fce22664266 100644
Binary files a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-active-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-active-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-active-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-active-ionic-md-ltr-light-Mobile-Firefox-linux.png
index f9fb89bbcba..ec285792ffe 100644
Binary files a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-active-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-active-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-active-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-active-ionic-md-ltr-light-Mobile-Safari-linux.png
index 3ad3b10da10..264ee70a9e9 100644
Binary files a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-active-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-active-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 93ce3a5f4a3..5fc881dd371 100644
Binary files a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 73f2131c808..00668fc0d77 100644
Binary files a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png
index 9c63ac5626d..de00640b484 100644
Binary files a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-disabled-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-disabled-md-ltr-Mobile-Safari-linux.png
index 7773aabfaed..d9e09629137 100644
Binary files a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-disabled-md-ltr-Mobile-Safari-linux.png and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-disabled-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 236a1a42987..e9a52d192e8 100644
Binary files a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 3ab959262dc..246c3316224 100644
Binary files a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-ionic-md-ltr-light-Mobile-Safari-linux.png
index 05c9aa1910f..8f4b3627b64 100644
Binary files a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png
index ba1fcd6a986..9a62c66c2b5 100644
Binary files a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png
index b335a0518a8..832775e2cce 100644
Binary files a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ionic-md-ltr-light-Mobile-Safari-linux.png
index 3e2c67fee4a..84bfa6ae6c6 100644
Binary files a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-focused-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-hover-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-hover-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 3ad18f6123f..42157527859 100644
Binary files a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-hover-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-hover-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-hover-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-hover-ionic-md-ltr-light-Mobile-Firefox-linux.png
index c63f3d3a1c2..c62ec9a7ab0 100644
Binary files a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-hover-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-hover-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-hover-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-hover-ionic-md-ltr-light-Mobile-Safari-linux.png
index 4ce2447cb6b..cff3e1c7e9c 100644
Binary files a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-hover-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-hover-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index ae77bad1242..451762dae5f 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -1,5 +1,3 @@
-import caretLeftRegular from '@phosphor-icons/core/assets/regular/caret-left.svg';
-import caretRightRegular from '@phosphor-icons/core/assets/regular/caret-right.svg';
import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Method, Prop, State, Watch, h, writeTask } from '@stencil/core';
import { startFocusVisible } from '@utils/focus-visible';
@@ -2765,87 +2763,45 @@ export class Datetime implements ComponentInterface {
/**
* Get the icon to use for the next icon.
- * Otherwise, use the icon set in the config.
+ * Use the icon set in the config.
* If no icon is set in the config, use the default icon.
*/
get datetimeNextIcon(): string {
- // Determine the theme and map to default icons
- const theme = getIonTheme(this);
- const defaultIcons = {
- ios: chevronForward,
- ionic: caretRightRegular,
- md: chevronForward,
- };
-
- // Get the default icon based on the theme, falling back to 'md' icon if necessary
- const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-
- // Return the configured datetime next icon or the default icon
- return config.get('datetimeNextIcon', defaultIcon);
+ return config.get('datetimeNextIcon', chevronForward);
}
/**
* Get the icon to use for the previous icon.
- * Otherwise, use the icon set in the config.
+ * Use the icon set in the config.
* If no icon is set in the config, use the default icon.
*/
get datetimePreviousIcon(): string {
- // Determine the theme and map to default icons
- const theme = getIonTheme(this);
- const defaultIcons = {
- ios: chevronBack,
- ionic: caretLeftRegular,
- md: chevronBack,
- };
-
- // Get the default icon based on the theme, falling back to 'md' icon if necessary
- const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-
- // Return the configured datetime previous icon or the default icon
- return config.get('datetimePreviousIcon', defaultIcon);
+ return config.get('datetimePreviousIcon', chevronBack);
}
/**
* Get the icon to use for the show month and year icon.
- * Otherwise, use the icon set in the config.
+ * Use the icon set in the config.
* If no icon is set in the config, use the default icon.
*/
get datetimeCollapsedIcon(): string | undefined {
- // Determine the theme and map to default icons
+ // Determine the theme and map to the default icon
const theme = getIonTheme(this);
+ const defaultIcon = theme === 'ios' ? chevronForward : caretDownSharp;
- const defaultIcons = {
- ios: chevronForward,
- ionic: undefined,
- md: caretDownSharp,
- };
-
- // Get the default icon based on the theme, falling back to 'md' icon if necessary
- const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-
- // Return the configured datetime show month and year icon or the default icon
return config.get('datetimeCollapsedIcon', defaultIcon);
}
/**
* Get the icon to use for the hide month and year icon.
- * Otherwise, use the icon set in the config.
+ * Use the icon set in the config.
* If no icon is set in the config, use the default icon.
*/
get datetimeExpandedIcon(): string | undefined {
- // Determine the theme and map to default icons
+ // Determine the theme and map to the default icon
const theme = getIonTheme(this);
+ const defaultIcon = theme === 'ios' ? chevronDown : caretUpSharp;
- const defaultIcons = {
- ios: chevronDown,
- ionic: undefined,
- md: caretUpSharp,
- };
-
- // Get the default icon based on the theme, falling back to 'md' icon if necessary
- const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-
- // Return the configured datetime hide month and year icon or the default icon
return config.get('datetimeExpandedIcon', defaultIcon);
}
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 2be2940067d..15f3d723c34 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ionic-md-ltr-light-Mobile-Firefox-linux.png
index c095f4fe37c..cebb68be760 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ionic-md-ltr-light-Mobile-Safari-linux.png
index 01c1e009235..a64204f4e54 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 100a2a4b625..9ec584accaf 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 7617dddf05c..2f987411df8 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ionic-md-ltr-light-Mobile-Safari-linux.png
index 7d52556bc7e..b1f52b82df7 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png
index c711a17d3b3..c8fb362bc0a 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 2065b703ba2..77b3d320c74 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Safari-linux.png
index 57bdd588f23..74d8458f90d 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 17379615c34..d2976dbb8c3 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 2d15ed7a276..ac6e58ce016 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Safari-linux.png
index 78b20d8cfb5..1a091fde05c 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png
index b075fababb6..65240873ffd 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-ltr-light-Mobile-Firefox-linux.png
index be16dd5d093..e6eb54322df 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-ltr-light-Mobile-Safari-linux.png
index 44c465ece6a..6f7a16490e3 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png
index f65e0803e92..35f709b5021 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-rtl-light-Mobile-Firefox-linux.png
index aab0ef64724..b0769692b2f 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-rtl-light-Mobile-Safari-linux.png
index 3cd2bc3a27c..0e3d90dc29d 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 2ff8cc386bb..5f4986e747e 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 4a804e61309..5aaa38033bf 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png
index bead1bd7a6f..60907d06cd7 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 9a337a35555..652fc4329f1 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png
index d1f27be40da..c929069609f 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png
index 430c1732465..f5f2d6708b6 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png
index b58fd0cb84d..aa7eb5b7e5e 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png
index ee318d0fd55..ef4874ee080 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png
index d5dc203a834..00e83be3800 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 59241e42233..c632176d764 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 931019c7578..30c51961478 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png
index 145f0545a2e..2f6348a07e8 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png
index bc196eb99ea..5b0d24aa1ab 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 2bdcc778134..dafe8201904 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png
index 933262901ba..af99dbd1fa5 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png
index d663e048313..fbd64a6e226 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 5daa0bf9c27..55ed9a7a7e1 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png
index 320b8c79e85..b0c31ba5507 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png
index c26c60a57d5..c5f2c39b10c 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 5560bd3615c..e30d8f5c62c 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png
index 02a23579641..30cc63618c4 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 0ad8d0d7497..96dd4bbebaa 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png
index cf58f812755..dcf41b68fb7 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png
index 435a2591183..a1997329028 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 7ab47dabfbc..efc17937606 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ionic-md-ltr-light-Mobile-Firefox-linux.png
index b09880f912e..0ffe91d3481 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ionic-md-ltr-light-Mobile-Safari-linux.png
index f9d05b9a0e6..51d34234f34 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ionic-md-ltr-light-Mobile-Chrome-linux.png
index c28127434e9..900503a83c4 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ionic-md-ltr-light-Mobile-Firefox-linux.png
index f536daaa24e..a495692580c 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ionic-md-ltr-light-Mobile-Safari-linux.png
index 67f58deebcf..9c3cd1f1c08 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 80168dce0e9..445e927db54 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 5823e1eeb3f..0a69aa8daf9 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ionic-md-ltr-light-Mobile-Safari-linux.png
index 96d208b914b..b183bfbd88d 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ionic-md-ltr-light-Mobile-Chrome-linux.png
index ff9018176a9..95ce20004a9 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 22969358d6d..033d1001cc0 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ionic-md-ltr-light-Mobile-Safari-linux.png
index 5071420e23c..75e32c00878 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 3622115085b..dcb608a2e99 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 23947b2fdfa..e6d9f5efd0d 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ionic-md-ltr-light-Mobile-Safari-linux.png
index 73527092641..97495c7bfe1 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ionic-md-ltr-light-Mobile-Chrome-linux.png
index fa4ce5d8df3..df5ea145c0a 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 7804aaa49e3..943f3f2a715 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ionic-md-ltr-light-Mobile-Safari-linux.png
index ce104f84d90..7f07c118bdd 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 09ebd08d889..7ee2f7e20ae 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 63a159add95..e60453e9f24 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png
index b028bd2190a..12699df3256 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 79a35fe8d96..6db11519491 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 4fbaeaefc33..240ea5c6c24 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ionic-md-ltr-light-Mobile-Safari-linux.png
index cd9c0678e7e..7bf972b1634 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 064fe21f890..56e2098c7d5 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ionic-md-ltr-light-Mobile-Firefox-linux.png
index fac227b3aa9..891657224d4 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ionic-md-ltr-light-Mobile-Safari-linux.png
index 7de3e6d7a3c..dfe67d1ba27 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 6f50675d8d0..ba3959cd17f 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 3ed58cb7c85..16ee126a13c 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png
index c91d180df24..2e611fd8d36 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 806442f6322..57c1efaef1b 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png
index dcc273eca50..d4db42981ad 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png
index be0f42c22f6..5fa04121fb3 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png
index a44e0d65275..8c53cdb0977 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png
index a6528d67900..89c1925d81e 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png
index c0439491b24..74913baac4d 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/fab-button/fab-button.tsx b/core/src/components/fab-button/fab-button.tsx
index 65c6500bb38..721e4e3119d 100755
--- a/core/src/components/fab-button/fab-button.tsx
+++ b/core/src/components/fab-button/fab-button.tsx
@@ -1,4 +1,3 @@
-import xRegular from '@phosphor-icons/core/assets/regular/x.svg';
import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Prop, Watch, h } from '@stencil/core';
import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
@@ -238,25 +237,19 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
this.inheritedAttributes = inheritAriaAttributes(this.el);
}
- get fabButtonCloseIcon() {
+ /**
+ * Get the icon to use for the close icon.
+ * If an icon is set on the component, use that.
+ * Otherwise, use the icon set in the config.
+ * If no icon is set in the config, use the default icon.
+ */
+ get fabButtonCloseIcon(): string {
// Return the icon if it is explicitly set
if (this.closeIcon != null) {
return this.closeIcon;
}
- // Determine the theme and map to default icons
- const theme = getIonTheme(this);
- const defaultIcons = {
- ios: close,
- ionic: xRegular,
- md: close,
- };
-
- // Get the default icon based on the theme, falling back to 'md' icon if necessary
- const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-
- // Return the configured fab button close icon or the default icon
- return config.get('fabButtonCloseIcon', defaultIcon);
+ return config.get('fabButtonCloseIcon', close);
}
render() {
diff --git a/core/src/components/input-password-toggle/input-password-toggle.tsx b/core/src/components/input-password-toggle/input-password-toggle.tsx
index 2cf3678d2a4..075f7222097 100644
--- a/core/src/components/input-password-toggle/input-password-toggle.tsx
+++ b/core/src/components/input-password-toggle/input-password-toggle.tsx
@@ -1,5 +1,3 @@
-import eyeSlashRegular from '@phosphor-icons/core/assets/regular/eye-slash.svg';
-import eyeRegular from '@phosphor-icons/core/assets/regular/eye.svg';
import type { ComponentInterface } from '@stencil/core';
import { Component, Element, Host, Prop, h, Watch } from '@stencil/core';
import { printIonWarning } from '@utils/logging';
@@ -7,7 +5,7 @@ import { createColorClasses } from '@utils/theme';
import { eyeOff, eye } from 'ionicons/icons';
import { config } from '../../global/config';
-import { getIonMode, getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
import type { Color, TextFieldTypes } from '../../interface';
/**
@@ -109,46 +107,34 @@ export class InputPasswordToggle implements ComponentInterface {
inputElRef.type = inputElRef.type === 'text' ? 'password' : 'text';
};
- get inputPasswordHideIcon() {
+ /**
+ * Get the icon to use for the hide icon.
+ * If an icon is set on the component, use that.
+ * Otherwise, use the icon set in the config.
+ * If no icon is set in the config, use the default icon.
+ */
+ get inputPasswordHideIcon(): string {
// Return the icon if it is explicitly set
if (this.hideIcon != null) {
return this.hideIcon;
}
- // Determine the theme and map to default icons
- const theme = getIonTheme(this);
- const defaultIcons = {
- ios: eyeOff,
- ionic: eyeSlashRegular,
- md: eyeOff,
- };
-
- // Get the default icon based on the theme, falling back to 'md' icon if necessary
- const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-
- // Return the configured input password hide icon or the default icon
- return config.get('inputPasswordHideIcon', defaultIcon);
+ return config.get('inputPasswordHideIcon', eyeOff);
}
- get inputPasswordShowIcon() {
+ /**
+ * Get the icon to use for the show icon.
+ * If an icon is set on the component, use that.
+ * Otherwise, use the icon set in the config.
+ * If no icon is set in the config, use the default icon.
+ */
+ get inputPasswordShowIcon(): string {
// Return the icon if it is explicitly set
if (this.showIcon != null) {
return this.showIcon;
}
- // Determine the theme and map to default icons
- const theme = getIonTheme(this);
- const defaultIcons = {
- ios: eye,
- ionic: eyeRegular,
- md: eye,
- };
-
- // Get the default icon based on the theme, falling back to 'md' icon if necessary
- const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-
- // Return the configured input password show icon or the default icon
- return config.get('inputPasswordShowIcon', defaultIcon);
+ return config.get('inputPasswordShowIcon', eye);
}
render() {
diff --git a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ionic-md-ltr-light-Mobile-Chrome-linux.png
index a961a46a79a..cd5fbdb185c 100644
Binary files a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 5c45a1a1dca..d57ced25034 100644
Binary files a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ionic-md-ltr-light-Mobile-Safari-linux.png
index 9a49f14eb69..b53ba3222ce 100644
Binary files a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 331db8a4ddc..962d6126975 100644
Binary files a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 91f9517d11b..cb27d430f84 100644
Binary files a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ionic-md-ltr-light-Mobile-Safari-linux.png
index 60f0374f8f9..4927ee2eeef 100644
Binary files a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-large-size-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index a70048c9463..316c8ca1045 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -1,4 +1,3 @@
-import xRegular from '@phosphor-icons/core/assets/regular/x.svg';
import type { ComponentInterface, EventEmitter } from '@stencil/core';
import {
Build,
@@ -1074,18 +1073,10 @@ export class Input implements ComponentInterface {
return this.clearInputIcon;
}
- // Determine the theme and map to default icons
+ // Determine the theme and map to the default icon
const theme = getIonTheme(this);
- const defaultIcons = {
- ios: closeCircle,
- ionic: xRegular,
- md: closeSharp,
- };
-
- // Get the default icon based on the theme, falling back to 'md' icon if necessary
- const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+ const defaultIcon = theme === 'ios' ? closeCircle : closeSharp;
- // Return the configured input clear icon or the default icon
return config.get('inputClearIcon', defaultIcon);
}
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Chrome-linux.png
index c76a514c04e..dc5a3b1c5ba 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 724f7f65647..fbf9ed6f3a6 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Safari-linux.png
index 844f476066b..a4e1a31d3fb 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Chrome-linux.png
index f6c8b64da15..597cf638d0e 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 66f7fe81a85..5e6bf64df05 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Safari-linux.png
index 605f0c41026..d59f0c316a2 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
index bcf9c56d447..1564043a8c7 100644
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -1,4 +1,3 @@
-import caretRightRegular from '@phosphor-icons/core/assets/regular/caret-right.svg';
import type { ComponentInterface } from '@stencil/core';
import { Build, Component, Element, Host, Listen, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
@@ -357,25 +356,19 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
return controls[0];
}
- get itemDetailIcon() {
+ /**
+ * Get the icon to use for the detail icon.
+ * If an icon is set on the component, use that.
+ * Otherwise, use the icon set in the config.
+ * If no icon is set in the config, use the default icon.
+ */
+ get itemDetailIcon(): string {
// Return the icon if it is explicitly set
if (this.detailIcon != null) {
return this.detailIcon;
}
- // Determine the theme and map to default icons
- const theme = getIonTheme(this);
- const defaultIcons = {
- ios: chevronForward,
- ionic: caretRightRegular,
- md: chevronForward,
- };
-
- // Get the default icon based on the theme, falling back to 'md' icon if necessary
- const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-
- // Return the configured item detail icon or the default icon
- return config.get('itemDetailIcon', defaultIcon);
+ return config.get('itemDetailIcon', chevronForward);
}
/**
@@ -383,7 +376,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
* the icon is a variation of chevron.
*/
get shouldFlipIcon() {
- return this.itemDetailIcon === chevronForward || this.itemDetailIcon === caretRightRegular;
+ return this.itemDetailIcon === chevronForward;
}
render() {
diff --git a/core/src/components/menu-button/menu-button.tsx b/core/src/components/menu-button/menu-button.tsx
index 61e683c1268..1b265a73e41 100644
--- a/core/src/components/menu-button/menu-button.tsx
+++ b/core/src/components/menu-button/menu-button.tsx
@@ -1,4 +1,3 @@
-import listRegular from '@phosphor-icons/core/assets/regular/list.svg';
import type { ComponentInterface } from '@stencil/core';
import { Component, Element, Host, Listen, Prop, State, h } from '@stencil/core';
import type { ButtonInterface } from '@utils/element-interface';
@@ -77,19 +76,16 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
this.visible = await updateVisibility(this.menu);
}
- get menuIcon() {
- // Determine the theme and map to default icons
+ /**
+ * Get the icon to use for the menu icon.
+ * Use the icon set in the config.
+ * If no icon is set in the config, use the default icon.
+ */
+ get menuIcon(): string {
+ // Determine the theme and map to the default icon
const theme = getIonTheme(this);
- const defaultIcons = {
- ios: menuOutline,
- ionic: listRegular,
- md: menuSharp,
- };
-
- // Get the default icon based on the theme, falling back to 'md' icon if necessary
- const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+ const defaultIcon = theme === 'ios' ? menuOutline : menuSharp;
- // Return the configured menu icon or the default icon
return config.get('menuIcon', defaultIcon);
}
diff --git a/core/src/components/refresher-content/refresher-content.tsx b/core/src/components/refresher-content/refresher-content.tsx
index 85f7ff2db18..1198d087a9a 100644
--- a/core/src/components/refresher-content/refresher-content.tsx
+++ b/core/src/components/refresher-content/refresher-content.tsx
@@ -1,4 +1,3 @@
-import caretLeftFill from '@phosphor-icons/core/assets/fill/caret-left-fill.svg';
import type { ComponentInterface } from '@stencil/core';
import { Component, Element, Host, Prop, h } from '@stencil/core';
import { ENABLE_HTML_CONTENT_DEFAULT } from '@utils/config';
@@ -95,6 +94,15 @@ export class RefresherContent implements ComponentInterface {
}
}
+ /**
+ * Get the icon to use for the arrow icon.
+ * Use the icon set in the config.
+ * If no icon is set in the config, use the default icon.
+ */
+ get refresherArrowIcon(): string {
+ return config.get('refresherArrowIcon', caretBackSharp);
+ }
+
private renderPullingText() {
const { customHTMLEnabled, pullingText } = this;
if (customHTMLEnabled) {
@@ -117,7 +125,6 @@ export class RefresherContent implements ComponentInterface {
const pullingIcon = this.pullingIcon;
const hasSpinner = pullingIcon != null && (SPINNERS[pullingIcon] as any) !== undefined;
const theme = getIonTheme(this);
- const arrowIcon = theme === 'ionic' ? caretLeftFill : caretBackSharp;
return (
{(theme === 'md' || theme === 'ionic') && this.pullingIcon === 'circular' && (
-
+
)}
diff --git a/core/src/components/refresher-content/test/refresher-content.spec.ts b/core/src/components/refresher-content/test/refresher-content.spec.ts
index 36e0f31b8bb..0932b8709b8 100644
--- a/core/src/components/refresher-content/test/refresher-content.spec.ts
+++ b/core/src/components/refresher-content/test/refresher-content.spec.ts
@@ -1,4 +1,6 @@
+import { setMode } from '@stencil/core';
import { newSpecPage } from '@stencil/core/testing';
+import { caretBackSharp } from 'ionicons/icons';
import { config } from '../../../global/config';
import { RefresherContent } from '../refresher-content';
@@ -51,3 +53,36 @@ describe('refresher-content: custom html', () => {
expect(refreshingContent.querySelector('button.custom-refreshing-html')).toBe(null);
});
});
+
+/**
+ * The arrow is only rendered for the md and ionic themes.
+ */
+describe('refresher-content: arrow icon', () => {
+ beforeEach(() => {
+ config.reset({});
+ setMode(() => 'md');
+ });
+
+ const newArrowIcon = async () => {
+ const page = await newSpecPage({
+ components: [RefresherContent],
+ html: ` `,
+ });
+
+ return page.body.querySelector('.arrow-container ion-icon')!;
+ };
+
+ it('should use the default arrow icon', async () => {
+ const arrowIcon = await newArrowIcon();
+
+ expect(arrowIcon.getAttribute('icon')).toBe(caretBackSharp);
+ });
+
+ it('should use the arrow icon set in the config', async () => {
+ config.reset({ refresherArrowIcon: 'custom-arrow-icon' });
+
+ const arrowIcon = await newArrowIcon();
+
+ expect(arrowIcon.getAttribute('icon')).toBe('custom-arrow-icon');
+ });
+});
diff --git a/core/src/components/reorder/reorder.tsx b/core/src/components/reorder/reorder.tsx
index e816b66745f..077787f8757 100644
--- a/core/src/components/reorder/reorder.tsx
+++ b/core/src/components/reorder/reorder.tsx
@@ -1,4 +1,3 @@
-import listRegular from '@phosphor-icons/core/assets/regular/list.svg';
import type { ComponentInterface } from '@stencil/core';
import { Component, Element, Host, Listen, h } from '@stencil/core';
import { reorderThreeOutline, reorderTwoSharp } from 'ionicons/icons';
@@ -39,22 +38,14 @@ export class Reorder implements ComponentInterface {
/**
* Get the icon to use for the handle icon.
- * Otherwise, use the icon set in the config.
+ * Use the icon set in the config.
* If no icon is set in the config, use the default icon.
*/
get reorderHandleIcon(): string {
- // Determine the theme and map to default icons
+ // Determine the theme and map to the default icon
const theme = getIonTheme(this);
- const defaultIcons = {
- ios: reorderThreeOutline,
- ionic: listRegular,
- md: reorderTwoSharp,
- };
+ const defaultIcon = theme === 'ios' ? reorderThreeOutline : reorderTwoSharp;
- // Get the default icon based on the theme, falling back to 'md' icon if necessary
- const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-
- // Return the configured reorder handle icon or the default icon
return config.get('reorderHandleIcon', defaultIcon);
}
diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx
index 568f4bdb57b..fa5986ad960 100644
--- a/core/src/components/searchbar/searchbar.tsx
+++ b/core/src/components/searchbar/searchbar.tsx
@@ -1,6 +1,3 @@
-import arrowLeftRegular from '@phosphor-icons/core/assets/regular/arrow-left.svg';
-import magnifyingGlassRegular from '@phosphor-icons/core/assets/regular/magnifying-glass.svg';
-import xRegular from '@phosphor-icons/core/assets/regular/x.svg';
import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Method, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
import { createClearButtonPressController } from '@utils/forms';
@@ -738,18 +735,10 @@ export class Searchbar implements ComponentInterface {
return this.clearIcon;
}
- // Determine the theme and map to default icons
+ // Determine the theme and map to the default icon
const theme = getIonTheme(this);
- const defaultIcons = {
- ios: closeCircle,
- ionic: xRegular,
- md: closeSharp,
- };
-
- // Get the default icon based on the theme, falling back to 'md' icon if necessary
- const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+ const defaultIcon = theme === 'ios' ? closeCircle : closeSharp;
- // Return the configured searchbar clear icon or the default icon
return config.get('searchbarClearIcon', defaultIcon);
}
@@ -766,18 +755,10 @@ export class Searchbar implements ComponentInterface {
return this.searchIcon;
}
- // Determine the theme and map to default icons
+ // Determine the theme and map to the default icon
const theme = getIonTheme(this);
- const defaultIcons = {
- ios: searchOutline,
- ionic: magnifyingGlassRegular,
- md: searchSharp,
- };
-
- // Get the default icon based on the theme, falling back to 'md' icon if necessary
- const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+ const defaultIcon = theme === 'ios' ? searchOutline : searchSharp;
- // Return the configured searchbar search icon or the default icon
return config.get('searchbarSearchIcon', defaultIcon);
}
@@ -793,19 +774,7 @@ export class Searchbar implements ComponentInterface {
return this.cancelButtonIcon;
}
- // Determine the theme and map to default icons
- const theme = getIonTheme(this);
- const defaultIcons = {
- ios: arrowBackSharp,
- ionic: arrowLeftRegular,
- md: arrowBackSharp,
- };
-
- // Get the default icon based on the theme, falling back to 'md' icon if necessary
- const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-
- // Return the configured searchbar cancel icon, the back button icon or the default icon
- return config.get('searchbarCancelIcon', config.get('backButtonIcon', defaultIcon));
+ return config.get('searchbarCancelIcon', config.get('backButtonIcon', arrowBackSharp));
}
render() {
diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-back-button-align-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-back-button-align-ionic-md-ltr-light-Mobile-Chrome-linux.png
index f5269532f7b..3d89b69d006 100644
Binary files a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-back-button-align-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-back-button-align-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-back-button-align-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-back-button-align-ionic-md-ltr-light-Mobile-Firefox-linux.png
index c756c01ba1e..bd381727151 100644
Binary files a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-back-button-align-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-back-button-align-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-back-button-align-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-back-button-align-ionic-md-ltr-light-Mobile-Safari-linux.png
index 2cbe91ace3c..2bcfe6d0b04 100644
Binary files a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-back-button-align-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-back-button-align-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png
index aea1db8406a..594a9ba0ecb 100644
Binary files a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 2d5e21661a3..263f99971a7 100644
Binary files a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png
index ab699a81b79..cd1dbe13860 100644
Binary files a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 916a17066b4..51e0f52aad8 100644
Binary files a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 92d232f3e4c..32511281281 100644
Binary files a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png
index db4467c0b67..a116e8b9a17 100644
Binary files a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 2268853e494..26b2f10bef3 100644
Binary files a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ionic-md-ltr-light-Mobile-Firefox-linux.png
index a44a983e471..f474d7e8243 100644
Binary files a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ionic-md-ltr-light-Mobile-Safari-linux.png
index 4f3466a1c0c..1bc222a4455 100644
Binary files a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ionic-md-rtl-light-Mobile-Chrome-linux.png
index a8a04e2e758..6b58b5b100d 100644
Binary files a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 72563e7fe41..66bfd05d28b 100644
Binary files a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ionic-md-rtl-light-Mobile-Safari-linux.png
index 496069899a7..fcf77e851f4 100644
Binary files a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-hidden-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-hidden-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 084c7c0ec60..c461781e3ed 100644
Binary files a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-hidden-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-hidden-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-hidden-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-hidden-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 0ae8a8b0984..39ad75dab82 100644
Binary files a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-hidden-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-hidden-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-hidden-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-hidden-ionic-md-ltr-light-Mobile-Safari-linux.png
index 7f3b3d89f10..b5d51a4663b 100644
Binary files a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-hidden-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-hidden-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-visible-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-visible-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 6beb33ab7e8..c7d0fd3605e 100644
Binary files a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-visible-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-visible-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-visible-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-visible-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 320f27a8186..cba3ed6c10c 100644
Binary files a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-visible-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-visible-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-visible-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-visible-ionic-md-ltr-light-Mobile-Safari-linux.png
index 8c5620e921e..99b581c37ce 100644
Binary files a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-visible-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-visible-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 7e60ff59791..094cfb6976c 100644
Binary files a/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 8a2c304abd2..741786306f8 100644
Binary files a/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png
index a0b5fa723ea..f80fc089d09 100644
Binary files a/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 0b92284571b..79060585e5b 100644
Binary files a/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 353ec444ce0..2237f232954 100644
Binary files a/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png
index 862caf5a8e7..aa701393180 100644
Binary files a/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 2aaa030fc31..27ae18f198d 100644
Binary files a/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 9744d091a0b..117f0cfb544 100644
Binary files a/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png
index d28da3717f3..8b5662f02d9 100644
Binary files a/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 199561e87ce..deb1ca4fcf7 100644
Binary files a/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 3b88d9d2743..f9d0e6bc4d9 100644
Binary files a/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png
index d79bdbf481f..2003bd799c1 100644
Binary files a/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 7ecd3f5b58b..f3cea59a67f 100644
Binary files a/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 5ae4cb1d07b..8c198da93f2 100644
Binary files a/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png
index de44d483c73..c182362865e 100644
Binary files a/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 3c8500a5b36..3704f65edfe 100644
Binary files a/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png
index a0ac777baea..d3cff304a30 100644
Binary files a/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png
index 09ea821e1f0..f7d4fbbb3df 100644
Binary files a/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/searchbar/test/size/searchbar.e2e.ts-snapshots/searchbar-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png
index e20ab6cb0be..44196f77e33 100644
Binary files a/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 68847ac67c8..2966fdbd6f1 100644
Binary files a/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png
index 4e67df6d0e4..039733be1ea 100644
Binary files a/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-cancel-button-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-cancel-button-ionic-md-ltr-light-Mobile-Chrome-linux.png
index df995bbd753..1d66cb95894 100644
Binary files a/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-cancel-button-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-cancel-button-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-cancel-button-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-cancel-button-ionic-md-ltr-light-Mobile-Firefox-linux.png
index a1a4ee97649..2324cd6218f 100644
Binary files a/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-cancel-button-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-cancel-button-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-cancel-button-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-cancel-button-ionic-md-ltr-light-Mobile-Safari-linux.png
index 437b51d3480..c2a806e1b69 100644
Binary files a/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-cancel-button-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-cancel-button-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 2c0c324b3ae..9091aefc1db 100644
Binary files a/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-clear-button-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-clear-button-ionic-md-ltr-light-Mobile-Firefox-linux.png
index a52e6d6fb9c..5c686c0d69e 100644
Binary files a/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-clear-button-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-clear-button-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-clear-button-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-clear-button-ionic-md-ltr-light-Mobile-Safari-linux.png
index 51dbce3c05d..dc9ab3f1b16 100644
Binary files a/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-clear-button-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-clear-button-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png
index d11838674fe..5e74427c275 100644
Binary files a/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 5c375bf1311..f86870bb3f1 100644
Binary files a/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-ionic-md-ltr-light-Mobile-Safari-linux.png
index 37ff24c5c29..f48a84d888b 100644
Binary files a/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/searchbar/test/states/searchbar.e2e.ts-snapshots/searchbar-state-focused-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select-modal/select-modal.tsx b/core/src/components/select-modal/select-modal.tsx
index baafc792e83..6b19b947e95 100644
--- a/core/src/components/select-modal/select-modal.tsx
+++ b/core/src/components/select-modal/select-modal.tsx
@@ -1,5 +1,5 @@
+import { config } from '@global/config';
import { getIonMode, getIonTheme } from '@global/ionic-global';
-import xRegular from '@phosphor-icons/core/assets/regular/x.svg';
import type { ComponentInterface } from '@stencil/core';
import { Component, Element, Host, Prop, forceUpdate, h } from '@stencil/core';
import { getOverlayLabelJustify, getOverlayLabelPlacement } from '@utils/overlay-control-label';
@@ -8,7 +8,6 @@ import { renderOptionLabel } from '@utils/select-option-render';
import { getClassMap, hostContext } from '@utils/theme';
import { closeOutline, closeSharp } from 'ionicons/icons';
-import type { Theme } from '../../interface';
import type { CheckboxCustomEvent } from '../checkbox/checkbox-interface';
import type { RadioGroupCustomEvent } from '../radio-group/radio-group-interface';
import type { SelectOverlayOption } from '../select/select-interface';
@@ -97,14 +96,17 @@ export class SelectModal implements ComponentInterface {
}
}
- private get cancelButtonIcon(): string {
+ /**
+ * Get the icon to use for the cancel icon.
+ * Use the icon set in the config.
+ * If no icon is set in the config, use the default icon.
+ */
+ private get selectModalCancelIcon(): string {
+ // Determine the theme and map to the default icon
const theme = getIonTheme(this);
- const icons: Record = {
- ios: closeOutline,
- md: closeSharp,
- ionic: xRegular,
- };
- return icons[theme];
+ const defaultIcon = theme === 'ios' ? closeOutline : closeSharp;
+
+ return config.get('selectModalCancelIcon', defaultIcon);
}
private getModalContextClasses() {
@@ -262,7 +264,7 @@ export class SelectModal implements ComponentInterface {
onClick={() => this.closeModal()}
>
{this.cancelIcon ? (
-
+
) : (
this.cancelText
)}
diff --git a/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-multiple-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-multiple-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 0422fbc34ed..f0dce6699f4 100644
Binary files a/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-multiple-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-multiple-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-multiple-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-multiple-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 36b0e606546..56e174b902f 100644
Binary files a/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-multiple-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-multiple-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-multiple-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-multiple-diff-ionic-md-ltr-light-Mobile-Safari-linux.png
index 4172d823b97..345b1f9a416 100644
Binary files a/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-multiple-diff-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select-modal/test/basic/select-modal.e2e.ts-snapshots/select-modal-multiple-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select-modal/test/custom/select-modal.e2e.ts-snapshots/select-modal-cancel-icon-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select-modal/test/custom/select-modal.e2e.ts-snapshots/select-modal-cancel-icon-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png
index d355a57b2fc..4ce50d1e41c 100644
Binary files a/core/src/components/select-modal/test/custom/select-modal.e2e.ts-snapshots/select-modal-cancel-icon-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select-modal/test/custom/select-modal.e2e.ts-snapshots/select-modal-cancel-icon-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select-modal/test/custom/select-modal.e2e.ts-snapshots/select-modal-cancel-icon-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select-modal/test/custom/select-modal.e2e.ts-snapshots/select-modal-cancel-icon-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 8418224e6c9..beeccbd3d26 100644
Binary files a/core/src/components/select-modal/test/custom/select-modal.e2e.ts-snapshots/select-modal-cancel-icon-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select-modal/test/custom/select-modal.e2e.ts-snapshots/select-modal-cancel-icon-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select-modal/test/custom/select-modal.e2e.ts-snapshots/select-modal-cancel-icon-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select-modal/test/custom/select-modal.e2e.ts-snapshots/select-modal-cancel-icon-diff-ionic-md-ltr-light-Mobile-Safari-linux.png
index 78831d642ae..cacc959cc40 100644
Binary files a/core/src/components/select-modal/test/custom/select-modal.e2e.ts-snapshots/select-modal-cancel-icon-diff-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select-modal/test/custom/select-modal.e2e.ts-snapshots/select-modal-cancel-icon-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select-modal/test/select-modal.spec.ts b/core/src/components/select-modal/test/select-modal.spec.ts
new file mode 100644
index 00000000000..27704f9ebf5
--- /dev/null
+++ b/core/src/components/select-modal/test/select-modal.spec.ts
@@ -0,0 +1,39 @@
+import { setMode } from '@stencil/core';
+import { newSpecPage } from '@stencil/core/testing';
+import { closeSharp } from 'ionicons/icons';
+
+import { config } from '../../../global/config';
+import { SelectModal } from '../select-modal';
+
+/**
+ * The cancel button only renders an icon when `cancelIcon` is set.
+ */
+describe('select-modal: cancel icon', () => {
+ beforeEach(() => {
+ config.reset({});
+ setMode(() => 'md');
+ });
+
+ const newCancelIcon = async () => {
+ const page = await newSpecPage({
+ components: [SelectModal],
+ html: ` `,
+ });
+
+ return page.body.querySelector('ion-buttons ion-icon')!;
+ };
+
+ it('should use the default cancel icon', async () => {
+ const cancelIcon = await newCancelIcon();
+
+ expect(cancelIcon.getAttribute('icon')).toBe(closeSharp);
+ });
+
+ it('should use the cancel icon set in the config', async () => {
+ config.reset({ selectModalCancelIcon: 'custom-cancel-icon' });
+
+ const cancelIcon = await newCancelIcon();
+
+ expect(cancelIcon.getAttribute('icon')).toBe('custom-cancel-icon');
+ });
+});
diff --git a/core/src/components/select-modal/test/states/select-modal.e2e.ts-snapshots/select-modal-checkbox-states-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select-modal/test/states/select-modal.e2e.ts-snapshots/select-modal-checkbox-states-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 3787c9e7b68..621f0f2f5b9 100644
Binary files a/core/src/components/select-modal/test/states/select-modal.e2e.ts-snapshots/select-modal-checkbox-states-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select-modal/test/states/select-modal.e2e.ts-snapshots/select-modal-checkbox-states-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select-modal/test/states/select-modal.e2e.ts-snapshots/select-modal-checkbox-states-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select-modal/test/states/select-modal.e2e.ts-snapshots/select-modal-checkbox-states-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 65fe2d64ce1..45cf1099891 100644
Binary files a/core/src/components/select-modal/test/states/select-modal.e2e.ts-snapshots/select-modal-checkbox-states-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select-modal/test/states/select-modal.e2e.ts-snapshots/select-modal-checkbox-states-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select-modal/test/states/select-modal.e2e.ts-snapshots/select-modal-checkbox-states-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select-modal/test/states/select-modal.e2e.ts-snapshots/select-modal-checkbox-states-ionic-md-ltr-light-Mobile-Safari-linux.png
index 701a847907a..90f84352891 100644
Binary files a/core/src/components/select-modal/test/states/select-modal.e2e.ts-snapshots/select-modal-checkbox-states-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select-modal/test/states/select-modal.e2e.ts-snapshots/select-modal-checkbox-states-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-end-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-end-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 7aa6ada12cb..9e4a5715865 100644
Binary files a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-end-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-end-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-end-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-end-ionic-md-ltr-light-Mobile-Firefox-linux.png
index a067cf1ba57..52cd7a3a1a8 100644
Binary files a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-end-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-end-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-end-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-end-ionic-md-ltr-light-Mobile-Safari-linux.png
index 62aa6b905c5..dbe553d01fc 100644
Binary files a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-end-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-end-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-end-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-end-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 45e519065d5..59eec403980 100644
Binary files a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-end-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-end-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-end-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-end-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 7d53c273fba..575961d7c86 100644
Binary files a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-end-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-end-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-end-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-end-ionic-md-rtl-light-Mobile-Safari-linux.png
index 04b456addbe..13688d40138 100644
Binary files a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-end-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-end-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-start-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-start-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 7aa6ada12cb..9e4a5715865 100644
Binary files a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-start-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-start-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-start-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-start-ionic-md-ltr-light-Mobile-Firefox-linux.png
index a067cf1ba57..52cd7a3a1a8 100644
Binary files a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-start-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-start-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-start-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-start-ionic-md-ltr-light-Mobile-Safari-linux.png
index 62aa6b905c5..dbe553d01fc 100644
Binary files a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-start-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-start-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-start-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-start-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 45e519065d5..59eec403980 100644
Binary files a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-start-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-start-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-start-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-start-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 7d53c273fba..575961d7c86 100644
Binary files a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-start-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-start-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-start-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-start-ionic-md-rtl-light-Mobile-Safari-linux.png
index 04b456addbe..13688d40138 100644
Binary files a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-start-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-modal-start-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-end-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-end-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 11a9676e5d3..256dcf4bf10 100644
Binary files a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-end-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-end-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-end-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-end-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 12e4580499d..afefa3c730a 100644
Binary files a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-end-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-end-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-end-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-end-ionic-md-ltr-light-Mobile-Safari-linux.png
index 5f7038c417a..594243e9771 100644
Binary files a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-end-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-end-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-end-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-end-ionic-md-rtl-light-Mobile-Chrome-linux.png
index f1a028dc0ba..caf31e064d1 100644
Binary files a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-end-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-end-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-end-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-end-ionic-md-rtl-light-Mobile-Firefox-linux.png
index a0b3756590d..8bbb1a18eb6 100644
Binary files a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-end-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-end-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-end-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-end-ionic-md-rtl-light-Mobile-Safari-linux.png
index 22c2ba1e9e9..4131f71f48d 100644
Binary files a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-end-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-end-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-start-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-start-ionic-md-ltr-light-Mobile-Chrome-linux.png
index f735a12b008..f7a29f2f989 100644
Binary files a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-start-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-start-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-start-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-start-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 01dd094530c..8dbfdf71d84 100644
Binary files a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-start-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-start-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-start-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-start-ionic-md-ltr-light-Mobile-Safari-linux.png
index 3d4e733b4bc..eeb979a56b7 100644
Binary files a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-start-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-start-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-start-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-start-ionic-md-rtl-light-Mobile-Chrome-linux.png
index ffc1b102ecf..3e1d33b28d7 100644
Binary files a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-start-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-start-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-start-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-start-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 9af4787d97f..56170b1c223 100644
Binary files a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-start-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-start-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-start-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-start-ionic-md-rtl-light-Mobile-Safari-linux.png
index 4637fb6d2bc..33ca5ae8181 100644
Binary files a/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-start-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/select-option/test/label-placement/select-option.e2e.ts-snapshots/select-option-label-popover-start-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select-popover/test/states/select-popover.e2e.ts-snapshots/select-popover-checkbox-states-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select-popover/test/states/select-popover.e2e.ts-snapshots/select-popover-checkbox-states-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 78b8d52a9bc..a78f7578dc7 100644
Binary files a/core/src/components/select-popover/test/states/select-popover.e2e.ts-snapshots/select-popover-checkbox-states-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select-popover/test/states/select-popover.e2e.ts-snapshots/select-popover-checkbox-states-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select-popover/test/states/select-popover.e2e.ts-snapshots/select-popover-checkbox-states-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select-popover/test/states/select-popover.e2e.ts-snapshots/select-popover-checkbox-states-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 3cfc3bcee8b..2fb2720f97d 100644
Binary files a/core/src/components/select-popover/test/states/select-popover.e2e.ts-snapshots/select-popover-checkbox-states-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select-popover/test/states/select-popover.e2e.ts-snapshots/select-popover-checkbox-states-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select-popover/test/states/select-popover.e2e.ts-snapshots/select-popover-checkbox-states-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select-popover/test/states/select-popover.e2e.ts-snapshots/select-popover-checkbox-states-ionic-md-ltr-light-Mobile-Safari-linux.png
index dcdd1d85ae2..7c421c589ff 100644
Binary files a/core/src/components/select-popover/test/states/select-popover.e2e.ts-snapshots/select-popover-checkbox-states-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select-popover/test/states/select-popover.e2e.ts-snapshots/select-popover-checkbox-states-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx
index 63137dda636..37d3db3769e 100644
--- a/core/src/components/select/select.tsx
+++ b/core/src/components/select/select.tsx
@@ -1,4 +1,3 @@
-import caretDownRegular from '@phosphor-icons/core/assets/regular/caret-down.svg';
import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Build, Component, Element, Event, Host, Method, Prop, State, Watch, h, forceUpdate } from '@stencil/core';
import { ENABLE_HTML_CONTENT_DEFAULT } from '@utils/config';
@@ -1402,18 +1401,10 @@ export class Select implements ComponentInterface {
return this.toggleIcon;
}
- // Determine the theme and map to default icons
+ // Determine the theme and map to the default icon
const theme = getIonTheme(this);
- const defaultIcons = {
- ios: chevronExpand,
- ionic: caretDownRegular,
- md: caretDownSharp,
- };
-
- // Get the default icon based on the theme, falling back to 'md' icon if necessary
- const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+ const defaultIcon = theme === 'ios' ? chevronExpand : caretDownSharp;
- // Return the configured select expanded icon or the default icon
return config.get('selectExpandedIcon', defaultIcon);
}
@@ -1429,16 +1420,9 @@ export class Select implements ComponentInterface {
return this.toggleIcon;
}
- // Determine the theme and map to default icons
+ // Determine the theme and map to the default icon
const theme = getIonTheme(this);
- const defaultIcons = {
- ios: chevronExpand,
- ionic: caretDownRegular,
- md: caretDownSharp,
- };
-
- // Get the default icon based on the theme, falling back to 'md' icon if necessary
- const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+ const defaultIcon = theme === 'ios' ? chevronExpand : caretDownSharp;
return config.get('selectCollapsedIcon', defaultIcon);
}
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 65450ff056e..1e652b1e154 100644
Binary files a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 3cee6956744..6f1662c0399 100644
Binary files a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-ionic-md-ltr-light-Mobile-Safari-linux.png
index 540e44ca50b..b05b9ff38a3 100644
Binary files a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ionic-md-ltr-light-Mobile-Chrome-linux.png
index e51a1956b4f..c5f75f27364 100644
Binary files a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 2545bed1c5f..95cd454a6dc 100644
Binary files a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ionic-md-ltr-light-Mobile-Safari-linux.png
index c82ff67b404..f65f7ad2a42 100644
Binary files a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 898f3c6370e..79fa3956134 100644
Binary files a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-ionic-md-ltr-light-Mobile-Firefox-linux.png
index fc6aed05322..ebc5c7bb178 100644
Binary files a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-ionic-md-ltr-light-Mobile-Safari-linux.png
index 29e1435d6ce..d27d4022fed 100644
Binary files a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 689cc181b07..41d69dbbe3b 100644
Binary files a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
index e77b3080ff2..a9d7509bde1 100644
Binary files a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-ionic-md-ltr-light-Mobile-Safari-linux.png
index e14adb2b810..72b3613ce4b 100644
Binary files a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-ionic-md-ltr-light-Mobile-Chrome-linux.png
index eaf7c3ad97d..a7fe650ca44 100644
Binary files a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-ionic-md-ltr-light-Mobile-Firefox-linux.png
index f5e5bb56aa7..b891656ebab 100644
Binary files a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-ionic-md-ltr-light-Mobile-Safari-linux.png
index ccacb24ec95..bc117c6cdb9 100644
Binary files a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 58ae36fc502..5bd4c0b62cd 100644
Binary files a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 7a29b9fdf61..a1486963e2d 100644
Binary files a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png
index 6bf8b6ffb12..f6405974ab5 100644
Binary files a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 14cea4a6d68..9bdc1282894 100644
Binary files a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
index c4cb8a65038..b8954351beb 100644
Binary files a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
index e2c8742886e..59a8f9451c7 100644
Binary files a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 8f3a73ba2e2..c511c3f4b8c 100644
Binary files a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 60a184268cb..356b926e4b4 100644
Binary files a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-ionic-md-ltr-light-Mobile-Safari-linux.png
index c06acfd07e2..4ea4a82a8db 100644
Binary files a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 58ae36fc502..5bd4c0b62cd 100644
Binary files a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 7a29b9fdf61..a1486963e2d 100644
Binary files a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Safari-linux.png
index 6bf8b6ffb12..f6405974ab5 100644
Binary files a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-ionic-md-ltr-light-Mobile-Chrome-linux.png
index aa209dd5c95..7c6529f39f9 100644
Binary files a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-ionic-md-ltr-light-Mobile-Firefox-linux.png
index babec58a701..e0dfa4ddd98 100644
Binary files a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-ionic-md-ltr-light-Mobile-Safari-linux.png
index c2d64fede29..2f41bb26eff 100644
Binary files a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 8bac7383405..70c774d46cd 100644
Binary files a/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png
index f984a2e9bc2..42ea00ff188 100644
Binary files a/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png
index 32281d1d796..259d1a9663c 100644
Binary files a/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/color/select.e2e.ts-snapshots/select-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 5994a3242b6..6d52d461bf0 100644
Binary files a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 22d228e7b26..a2374143d0f 100644
Binary files a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-ionic-md-ltr-light-Mobile-Safari-linux.png
index 4765147dab0..b4902646be4 100644
Binary files a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 0915f2908b3..717909777e0 100644
Binary files a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 88eb895c6f6..bdac80caaf6 100644
Binary files a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ionic-md-ltr-light-Mobile-Safari-linux.png
index 2b7fc6a2f9b..d2a8117488d 100644
Binary files a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
index f4aa3c1d5f0..747ad90bac0 100644
Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 370009b418c..f22e1c23c0e 100644
Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
index b92c23f6bb4..13a3fa9f058 100644
Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 17e4c401960..98dc5e714af 100644
Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 72b5c283e4d..1923acc522e 100644
Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png
index d658a85ebbc..c840e4abedc 100644
Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 494cdc0373b..6b268764c86 100644
Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 9a424315811..68a2e58cb13 100644
Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Safari-linux.png
index 9fd48bf12cc..301644730ba 100644
Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 3540fc92ca4..01a6e65429a 100644
Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 22a3786f0c2..ff024935e95 100644
Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-rtl-light-Mobile-Safari-linux.png
index 612eaf94a47..4d9914bf603 100644
Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-custom-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 09403c8434b..5adba18661c 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png
index e73a821d910..907adff9c6b 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-ionic-md-ltr-light-Mobile-Safari-linux.png
index 719c99a2877..daad128c690 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-no-fill-highlight-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-custom-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-custom-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 303663e6880..483a3ca5c9c 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-custom-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-custom-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-custom-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-custom-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 881584e2c77..da6a4aed752 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-custom-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-custom-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-custom-highlight-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-custom-highlight-ionic-md-ltr-light-Mobile-Safari-linux.png
index e2545dd974d..0d8151531e3 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-custom-highlight-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-custom-highlight-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-ionic-md-ltr-light-Mobile-Chrome-linux.png
index d5e24b4cad7..279354908cd 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 97119b0e71d..e6ff84ceb6b 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-ionic-md-ltr-light-Mobile-Safari-linux.png
index da9a4b7bf55..c4d3dd34ea5 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-focus-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 8c19e099a03..f028ad598f2 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 5545e18fd81..5b76d7ddd33 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-highlight-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-highlight-ionic-md-ltr-light-Mobile-Safari-linux.png
index 97db14a9c1a..61a721cb2a1 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-highlight-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-highlight-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png
index e303d7db912..621570c1441 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png
index e98c813478c..d6f0c136aa2 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png
index 61f6f8f2083..88fea9d1720 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png
index bd1af0098e5..8c6b348cebf 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 0f7f3510bf4..2863c1f36d6 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-ionic-md-ltr-light-Mobile-Safari-linux.png
index b57c744fb9d..355e675188f 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-outline-valid-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png
index af0313ac9b8..f24bb108ef5 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png
index ece4726ea2e..34b5f1cc7bf 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-highlight-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-highlight-ionic-md-ltr-light-Mobile-Safari-linux.png
index d2ecec0a9b1..321bee75a26 100644
Binary files a/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-highlight-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/highlight/select.e2e.ts-snapshots/select-solid-highlight-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png
index afbaaf4a287..9722ca57fe1 100644
Binary files a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 2ed577d779f..3aba37a5217 100644
Binary files a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png
index 6bba893dc4e..c19efc87c83 100644
Binary files a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-inset-list-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-item-flex-container-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-item-flex-container-ionic-md-ltr-light-Mobile-Chrome-linux.png
index c2415c4933c..dd14ee33f1a 100644
Binary files a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-item-flex-container-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-item-flex-container-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-item-flex-container-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-item-flex-container-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 6415e8726b5..4c84c7cc091 100644
Binary files a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-item-flex-container-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-item-flex-container-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-item-flex-container-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-item-flex-container-ionic-md-ltr-light-Mobile-Safari-linux.png
index e0f8f4fe317..cad6cbb3a19 100644
Binary files a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-item-flex-container-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-item-flex-container-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 1521e07e0df..87245397289 100644
Binary files a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 7d6c091ffc2..152bef947eb 100644
Binary files a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png
index 1080ba3392f..4d398a9e9f6 100644
Binary files a/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/item/select.e2e.ts-snapshots/select-list-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 9bb74953959..d699c9d07c9 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 132d5c2eed0..60a2a607bd7 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-ltr-light-Mobile-Safari-linux.png
index eb4cf2274f9..b9333b3d1d9 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-rtl-light-Mobile-Chrome-linux.png
index d178ccf46fe..4012b1d061c 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 66ef7583bdc..810c1522ed0 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-rtl-light-Mobile-Safari-linux.png
index dbb9264665a..eebf5f0275f 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-default-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 0a624c70f8d..69ad6094fd7 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-ltr-light-Mobile-Firefox-linux.png
index acde7fea362..e532ea56c5b 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-ltr-light-Mobile-Safari-linux.png
index cb420761a01..94e0c46d99f 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-rtl-light-Mobile-Chrome-linux.png
index acaf020af05..739a88b3041 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-rtl-light-Mobile-Firefox-linux.png
index ba813d28231..6694a6a1999 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-rtl-light-Mobile-Safari-linux.png
index 659820554d3..aad402c4d03 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-long-label-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png
index aa5b7e6b46a..29adbb668dd 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 6371aa400e0..ba1e65d4f5a 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png
index 01682437540..e22df3a86fc 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 9bdf4741439..06ff72cf290 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 799eff8c4c3..a79b536f4fb 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-rtl-light-Mobile-Safari-linux.png
index 97edc0c6502..956ee235a5f 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 51d2ff879e5..207ac308afb 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 9edb3c714e4..c89252ae7cb 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png
index df9f4c875fc..7e93bc64d30 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 5b17fb0aacd..e20662c8c2b 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 939155c082c..1de9f63a618 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-rtl-light-Mobile-Safari-linux.png
index 436f94a5f50..17aee7c309f 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 9b8b99d0254..43b42d9b1fe 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 869e3b75171..cf0270424cc 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-ltr-light-Mobile-Safari-linux.png
index 23ff8bea0ea..aaee20503c0 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 6ca22e19efd..70ef8522545 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 7bcbaace0cc..23ce258c83a 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-rtl-light-Mobile-Safari-linux.png
index 50f6d22478b..25b1d662ab4 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-no-value-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 3a9b6a70fc3..8146546e2f7 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-ltr-light-Mobile-Firefox-linux.png
index c48beef0ef5..9343c58d630 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-ltr-light-Mobile-Safari-linux.png
index 81fa1394c4c..874f5035ecf 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-rtl-light-Mobile-Chrome-linux.png
index ac135eb3a5c..2613d6e0d86 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 1eeeba6a190..5c500e1e305 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-rtl-light-Mobile-Safari-linux.png
index 0be721fcea5..7384cc7153f 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 10951581623..30af6014e7d 100644
Binary files a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 9617e42cf39..79d124300a1 100644
Binary files a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
index d619d4971e8..90bad50cdd7 100644
Binary files a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 1e39a21712f..c9e035e489d 100644
Binary files a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 7aaa18c2622..916711543fd 100644
Binary files a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
index b2b294249be..8f265eaf137 100644
Binary files a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 3fd5ddebc69..9e5d612a016 100644
Binary files a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 48e3f42bc3e..b351c65b91c 100644
Binary files a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
index fa41061639e..9671075a92c 100644
Binary files a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 22003ea9fd4..692aa058f85 100644
Binary files a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png
index b5fe696ffdc..08c5a7b533e 100644
Binary files a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png
index ba439bf7f54..07f57ad6e3b 100644
Binary files a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 465227abb2b..a705c233a66 100644
Binary files a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 326f7e921e3..097c72dc797 100644
Binary files a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png
index 57d01c2d67c..996c5067f7f 100644
Binary files a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 1e39a21712f..c9e035e489d 100644
Binary files a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 7aaa18c2622..916711543fd 100644
Binary files a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png
index b2b294249be..8f265eaf137 100644
Binary files a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 442211763d2..3bb9c589564 100644
Binary files a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png
index bae8bebd6a6..628c4923cb6 100644
Binary files a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png
index c5506c92102..ff878cfb40d 100644
Binary files a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 04d2a75c6d2..f9a1f005330 100644
Binary files a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 43069ea9f92..c14917d8da0 100644
Binary files a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png
index f810bb2275a..a9a0543d9e5 100644
Binary files a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 1f214f4a199..fb6750b485a 100644
Binary files a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 0221589d480..e50e417f058 100644
Binary files a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png
index 0a329223607..416727d98c9 100644
Binary files a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 5ecbb157b46..f79865b69e2 100644
Binary files a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 896d657f9ca..ccb12926452 100644
Binary files a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-ionic-md-ltr-light-Mobile-Safari-linux.png
index 6a397c2d2b7..947fdb3387d 100644
Binary files a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-placeholder-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-ionic-md-ltr-light-Mobile-Chrome-linux.png
index bf0006ebea4..b6fafd7d299 100644
Binary files a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-ionic-md-ltr-light-Mobile-Firefox-linux.png
index a78f34d1646..dee4d95ccc5 100644
Binary files a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-ionic-md-ltr-light-Mobile-Safari-linux.png
index 937b109a0dc..6417d225a1a 100644
Binary files a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-disabled-value-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 0077f72d432..9e2224ae014 100644
Binary files a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 785e7b6b2fe..3b4a7b693ad 100644
Binary files a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-ionic-md-ltr-light-Mobile-Safari-linux.png
index ea7a9dc5739..44607bbc313 100644
Binary files a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-placeholder-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 56b30fb5a65..d440e8934bf 100644
Binary files a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 71578693dd3..c7c8a889c94 100644
Binary files a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-ionic-md-ltr-light-Mobile-Safari-linux.png
index df2ef82cb00..280c1d6ba02 100644
Binary files a/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/select/test/states/select.e2e.ts-snapshots/select-value-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 4315a6b34a0..7d6e4bc5efd 100644
Binary files a/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 918df8d0d71..9f52305265e 100644
Binary files a/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Safari-linux.png
index 48520bed8f7..0b61254089a 100644
Binary files a/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-dark-Mobile-Chrome-linux.png
index d2eeb683ead..270974dd6a1 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-dark-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-dark-Mobile-Firefox-linux.png
index fea30fab9b9..c5d23bbcece 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-dark-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-dark-Mobile-Safari-linux.png
index 4c5208e8fb6..45dc292f0ba 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-dark-Mobile-Safari-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Chrome-linux.png
index f0200b8bdd2..2e45f176787 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 6cecccf3c6b..983c55a12fc 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Safari-linux.png
index 02eda778aaa..0f25261ddca 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-dark-Mobile-Chrome-linux.png
index 2e6152f3d73..c1654cc5674 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-dark-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-dark-Mobile-Firefox-linux.png
index 19ad1126a49..a3b5e6f6401 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-dark-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-dark-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-dark-Mobile-Safari-linux.png
index 739bcd3dfd0..28c095367ab 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-dark-Mobile-Safari-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 3d73ed85ac4..9d1efa46171 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Firefox-linux.png
index cd9836b00e7..c6ed666e8ab 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Safari-linux.png
index 97d6277e70a..4864c8fdd6a 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-Mobile-Chrome-linux.png
index b4433478c4b..b538ab2fe09 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-Mobile-Firefox-linux.png
index 5d0c336e84e..5a0a5ea7f0a 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-Mobile-Safari-linux.png
index f7467bff91d..4023676339d 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-Mobile-Safari-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-light-Mobile-Chrome-linux.png
index f7bb45a7395..08d047e1684 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 0c8ddccd78c..6d9fbd8dcde 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-light-Mobile-Safari-linux.png
index f357bad762a..3905343dee0 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-Mobile-Chrome-linux.png
index f9351e56d62..6fd00dfd8b6 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-Mobile-Firefox-linux.png
index 71ae4dbc6bc..8d226f440dc 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-Mobile-Safari-linux.png
index 06a112a2109..d6311aba7cf 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-Mobile-Safari-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 5dc63041819..ed1775e49ac 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-light-Mobile-Firefox-linux.png
index be35796ade3..b4bbbad268a 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-light-Mobile-Safari-linux.png
index 8c5e72488a6..073e5b873c2 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx
index 28122cb2e24..384ff0fddae 100644
--- a/core/src/components/toggle/toggle.tsx
+++ b/core/src/components/toggle/toggle.tsx
@@ -1,5 +1,3 @@
-import checkRegular from '@phosphor-icons/core/assets/regular/check.svg';
-import minusRegular from '@phosphor-icons/core/assets/regular/minus.svg';
import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Build, Component, Element, Event, Host, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
import { checkInvalidState, createItemMultipleInputsObserver } from '@utils/forms';
@@ -366,25 +364,18 @@ export class Toggle implements ComponentInterface {
return checked ? this.toggleCheckedIcon : this.toggleUncheckedIcon;
};
+ /**
+ * Get the default icon to use for the checked icon based on the theme.
+ */
get toggleDefaultCheckedIcon(): string {
- // Determine the theme and map to default icons
+ // Determine the theme and map to the default icon
const theme = getIonTheme(this);
- const defaultIcons = {
- ios: removeOutline,
- ionic: checkRegular,
- md: checkmarkOutline,
- };
-
- // Get the default icon based on the theme, falling back to 'md' icon if necessary
- const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-
- // Return the default icon
- return defaultIcon;
+ return theme === 'ios' ? removeOutline : checkmarkOutline;
}
/**
* Get the icon to use for the checked icon.
- * Otherwise, use the icon set in the config.
+ * Use the icon set in the config.
* If no icon is set in the config, use the default icon.
*/
get toggleCheckedIcon(): string {
@@ -393,22 +384,14 @@ export class Toggle implements ComponentInterface {
/**
* Get the icon to use for the unchecked icon.
- * Otherwise, use the icon set in the config.
+ * Use the icon set in the config.
* If no icon is set in the config, use the default icon.
*/
get toggleUncheckedIcon(): string {
- // Determine the theme and map to default icons
+ // Determine the theme and map to the default icon
const theme = getIonTheme(this);
- const defaultIcons = {
- ios: ellipseOutline,
- ionic: minusRegular,
- md: removeOutline,
- };
-
- // Get the default icon based on the theme, falling back to 'md' icon if necessary
- const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+ const defaultIcon = theme === 'ios' ? ellipseOutline : removeOutline;
- // Return the configured toggle unchecked icon or the default icon
return config.get('toggleUncheckedIcon', defaultIcon);
}
diff --git a/core/src/utils/config.ts b/core/src/utils/config.ts
index ec75c564366..8506a1093a6 100644
--- a/core/src/utils/config.ts
+++ b/core/src/utils/config.ts
@@ -95,15 +95,23 @@ export interface IonicConfig {
loadingSpinner?: SpinnerTypes | null;
/**
- * Overrides the default icon in all `` components.
+ * Overrides the default icon in all `` components.
*/
refreshingIcon?: string;
/**
- * Overrides the default spinner type in all `` components.
+ * Overrides the default spinner type in all ``
+ * components.
*/
refreshingSpinner?: SpinnerTypes | null;
+ /**
+ * Overrides the arrow icon shown on the circular pulling spinner
+ * in all `` components, only when the theme
+ * is `md` or `ionic`.
+ */
+ refresherArrowIcon?: string;
+
/**
* Overrides the default spinner type in all `` components.
*/
@@ -149,6 +157,16 @@ export interface IonicConfig {
*/
breadcrumbCollapsedIcon?: string;
+ /**
+ * Overrides the checkmark icon for all `ion-checkbox` components.
+ */
+ checkboxCheckedIcon?: string;
+
+ /**
+ * Overrides the indeterminate icon for all `ion-checkbox` components.
+ */
+ checkboxIndeterminateIcon?: string;
+
/**
* Overrides the next icon for all `ion-datetime` components.
*/
@@ -225,6 +243,12 @@ export interface IonicConfig {
*/
selectCollapsedIcon?: string;
+ /**
+ * Overrides the cancel icon for all `ion-select-modal` components,
+ * only when the cancel button is set to display an icon.
+ */
+ selectModalCancelIcon?: string;
+
/**
* Overrides the checked icon for all `ion-toggle` components.
*/
diff --git a/core/stencil.config.ts b/core/stencil.config.ts
index 4c2dd94f309..5bbdf99f4dc 100644
--- a/core/stencil.config.ts
+++ b/core/stencil.config.ts
@@ -247,8 +247,7 @@ export const config: Config = {
testing: {
moduleNameMapper: {
"@utils/test": ["/src/utils/test/utils"],
- "@utils/logging": ["/src/utils/logging"],
- "^.+\\.svg": "/svgTransform.js"
+ "@utils/logging": ["/src/utils/logging"]
},
setupFilesAfterEnv: ['./setupJest.js']
},
diff --git a/core/svgTransform.js b/core/svgTransform.js
deleted file mode 100644
index 8ced84279ef..00000000000
--- a/core/svgTransform.js
+++ /dev/null
@@ -1,13 +0,0 @@
-// This transform is required for svg files to work with Jest
-// See https://stackoverflow.com/q/46791263/3802466
-module.exports = {
- process() {
- return {
- code: `module.exports = {};`,
- };
- },
- getCacheKey() {
- // The output is always the same.
- return "svgTransform";
- },
-};
diff --git a/docs/component-guide.md b/docs/component-guide.md
index e475159da73..93202377c29 100644
--- a/docs/component-guide.md
+++ b/docs/component-guide.md
@@ -20,7 +20,9 @@
- [Converting Scoped to Shadow](#converting-scoped-to-shadow)
- [Sass Variables](#sass-variables)
- [CSS Shadow Parts](#css-shadow-parts)
-- [Icon Styling](#icon-styling)
+- [Icons](#icons)
+ * [Styling](#styling)
+ * [Global Config](#global-config)
- [RTL](#rtl)
- [Themes vs. Modes](#themes-vs-modes)
- [Adding New Components with Native Input Support](#adding-new-components-with-native-input-support)
@@ -762,7 +764,9 @@ 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
+## Icons
+
+### 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`.
@@ -784,6 +788,39 @@ When sizing `` elements, use `font-size` instead of `width` and `heigh
}
```
+### Global Config
+
+When a component renders an icon chosen by the framework, expose a global config property so the icon can be overridden across an entire application.
+
+Name the property after the component and the icon it replaces, such as `accordionToggleIcon`, `reorderHandleIcon`, or `searchbarClearIcon`. Declare it in [`IonicConfig`](/core/src/utils/config.ts), then read it from a getter that falls back to the component's default:
+
+```tsx
+/**
+ * Get the icon to use for the clear icon.
+ * If an icon is set on the component, use that.
+ * Otherwise, use the icon set in the config.
+ * If no icon is set in the config, use the default icon.
+ */
+get inputClearIcon(): string {
+ // Return the icon if it is explicitly set
+ if (this.clearInputIcon != null) {
+ return this.clearInputIcon;
+ }
+
+ // Determine the theme and map to the default icon
+ const theme = getIonTheme(this);
+ const defaultIcon = theme === 'ios' ? closeCircle : closeSharp;
+
+ return config.get('inputClearIcon', defaultIcon);
+}
+```
+
+If the component does not have a property that allows the developer to override the icon, remove the component-level override from the getter and simplify the comment accordingly.
+
+Icons that the developer supplies do not need a config property, because the developer already controls them. The `icon` on an `ion-action-sheet` button is one example.
+
+For guidelines on exposing the icon for styling, see the [CSS Shadow Parts Guidelines](./shadow-parts-guidelines.md).
+
## 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.