+
+
+ `,
+ config
+ );
+
+ const header = page.locator('ion-header');
+ await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-nested-slotted-images`));
+ });
+ });
+ });
+});
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..40e2c089c94
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..418ce45bab1
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..21a76a3bddb
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..ff4f842e0ac
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..fa0dc283eec
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..00534f0d19b
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..a02f7f1829a
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..2238d30ef6f
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-md-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..131b17e4d87
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..5dd73f73d0f
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..7b4380a16c8
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f6a0715c348
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..4e3269b7c31
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..15d2803caf5
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..a9afbed3635
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..5c052283753
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..56431ccae83
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-md-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..973ffded60f
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..13c9387e29b
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4fe6b7c2270
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..48f64465326
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..1b3faee8f04
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..e141f432e3e
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..741263d954f
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..de9e8af2520
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..bba2c73f564
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-md-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..cdc0df8fa95
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/image.svg b/core/src/components/toolbar/test/image.svg
new file mode 100644
index 00000000000..9cd6d0bc3f4
--- /dev/null
+++ b/core/src/components/toolbar/test/image.svg
@@ -0,0 +1 @@
+
diff --git a/core/src/components/toolbar/toolbar.ionic.scss b/core/src/components/toolbar/toolbar.ionic.scss
index a203b10619b..64b587a9b25 100644
--- a/core/src/components/toolbar/toolbar.ionic.scss
+++ b/core/src/components/toolbar/toolbar.ionic.scss
@@ -70,12 +70,12 @@
// Ionic Toolbar Slot Placement
// --------------------------------------------------
// We're using the slots to force the main toolbar content to be
-// cenetered in the toolbar. This is a bit of a hack but it works.
+// centered in the toolbar. This is a bit of a hack but it works.
// The main content is placed in the center and then JavaScript evaluates
// the sizes of the different slots and sets what size the pairs should be
// based on the larger one. We then use `flex-basis` to set the expected
// size of the slots and disable `flex-shrink` so that the smaller slot cannot
-// shrink and throw off the center, we also diable flex-grow so that slots do
+// shrink and throw off the center, we also disable flex-grow so that slots do
// not grow more than they need. The slots are paired up so the mirroring slots
// always have the same size. That is, start and end are paired and primary
// and secondary are paired. All of this works together to force the main
diff --git a/core/src/components/toolbar/toolbar.tsx b/core/src/components/toolbar/toolbar.tsx
index 0672a9ec584..34ab353f019 100644
--- a/core/src/components/toolbar/toolbar.tsx
+++ b/core/src/components/toolbar/toolbar.tsx
@@ -110,9 +110,28 @@ export class Toolbar implements ComponentInterface {
const slots = ['start', 'end', 'primary', 'secondary'];
slots.forEach((slot) => {
if (this.el.classList.contains(`has-${slot}-content`)) {
- const slotElement = this.el.shadowRoot?.querySelector(`slot[name="${slot}"]`) as HTMLElement | null;
+ const slotElement = this.el.shadowRoot?.querySelector(`slot[name="${slot}"]`) as HTMLSlotElement | null;
if (slotElement) {
+ // Check if the slot contains an img or ion-img
+ const assignedElements = slotElement.assignedElements({ flatten: true });
+ const hasImg = assignedElements.some((el) => {
+ if (el.tagName === 'IMG' || el.tagName === 'ION-IMG') {
+ return true;
+ }
+ // Check for nested images
+ return el.querySelector('img, ion-img');
+ });
+
+ // Temporarily allow slot to size to content by setting flex-basis
+ // to 'auto'. This ensures that slotted images can render at their
+ // intrinsic width for measurement.
+ if (hasImg) {
+ const { name } = slotPairs.find((pair) => pair.slots.includes(slot))!;
+ this.el.style.setProperty(`--${name}-size`, 'auto');
+ }
+
const width = slotElement.offsetWidth;
+
if (width > 0) {
slotWidths.set(slot, width);
} else {