diff --git a/libs/components/src/lib/button/button.spec.ts b/libs/components/src/lib/button/button.spec.ts
index 73a12e9172..7f5b53c938 100644
--- a/libs/components/src/lib/button/button.spec.ts
+++ b/libs/components/src/lib/button/button.spec.ts
@@ -205,17 +205,35 @@ describe('vwc-button', () => {
 	});
 
 	describe('icon-only', () => {
-		it('sets correct internal icon-only style', async () => {
-			const getControlIconOnly = () =>
-				element.shadowRoot?.querySelector('.control.icon-only');
-			const controlIconOnlyBefore = getControlIconOnly();
+		it('should sets correct internal icon-only style when icon is set and label is undefined', async () => {
+			const control = element.shadowRoot?.querySelector(`.control`);
 
 			element.icon = 'home';
+			element.label = undefined;
 			await elementUpdated(element);
 
-			const controlIconOnlyAfter = getControlIconOnly();
-			expect(controlIconOnlyBefore).toBeNull();
-			expect(controlIconOnlyAfter).toBeInstanceOf(Element);
+			expect(control?.classList.contains(`icon-only`)).toBeTruthy();
+
+			element.label = 'button';
+			await elementUpdated(element);
+
+			expect(control?.classList.contains(`icon-only`)).toBeFalsy();
+		});
+
+		it('should remove icon-only when drop-down-indicator is added, icon is set and label is undefined', async () => {
+			const control = element.shadowRoot?.querySelector(`.control`);
+
+			element.icon = 'home';
+			element.label = undefined;
+			element.dropdownIndicator = true;
+			await elementUpdated(element);
+
+			expect(control?.classList.contains(`icon-only`)).toBeFalsy();
+
+			element.dropdownIndicator = false;
+			await elementUpdated(element);
+
+			expect(control?.classList.contains(`icon-only`)).toBeTruthy();
 		});
 
 		it('should set icon-only class if slot name="icon" is slotted', async () => {
@@ -231,6 +249,24 @@ describe('vwc-button', () => {
 				getControlElement(element).classList.contains('icon-only')
 			).toEqual(true);
 		});
+
+		it('should add icon-only when drop-down-indicator is added, slotted icon is set and label is undefined', async () => {
+			const control = element.shadowRoot?.querySelector(`.control`);
+
+			const slottedElement = document.createElement('span');
+			slottedElement.slot = 'icon';
+			element.appendChild(slottedElement);
+			element.label = undefined;
+			element.dropdownIndicator = true;
+
+			await elementUpdated(element);
+			expect(control?.classList.contains(`icon-only`)).toBeFalsy();
+
+			element.dropdownIndicator = false;
+			await elementUpdated(element);
+
+			expect(control?.classList.contains(`icon-only`)).toBeTruthy();
+		});
 	});
 
 	describe.each([
diff --git a/libs/components/src/lib/button/button.template.ts b/libs/components/src/lib/button/button.template.ts
index 218be71c37..652a79056b 100644
--- a/libs/components/src/lib/button/button.template.ts
+++ b/libs/components/src/lib/button/button.template.ts
@@ -36,6 +36,7 @@ const getClasses = ({
 	iconSlottedContent,
 	ariaExpanded,
 	active,
+	dropdownIndicator,
 }: Button) =>
 	classNames(
 		'control',
@@ -46,7 +47,10 @@ const getClasses = ({
 		],
 		[`shape-${shape}`, Boolean(shape)],
 		[`size-${size}`, Boolean(size)],
-		['icon-only', !label && !!(icon || iconSlottedContent?.length)],
+		[
+			'icon-only',
+			!label && !!(icon || iconSlottedContent?.length) && !dropdownIndicator,
+		],
 		['icon-trailing', iconTrailing],
 		['stacked', Boolean(stacked)],
 		['active', ariaExpanded === 'true' || active]
diff --git a/libs/components/src/lib/button/ui.test.ts b/libs/components/src/lib/button/ui.test.ts
index b33276fe85..4fd023adc0 100644
--- a/libs/components/src/lib/button/ui.test.ts
+++ b/libs/components/src/lib/button/ui.test.ts
@@ -201,6 +201,11 @@ test('should show the component', async ({ page }: { page: Page }) => {
 		<vwc-button style="width: 200px" appearance="filled" dropdown-indicator label="wide"></vwc-button>
 		<vwc-button style="width: 100px" appearance="filled" dropdown-indicator label="too small for label"></vwc-button>
 		<vwc-button appearance="filled" dropdown-indicator icon="user-line"></vwc-button>
+	</div>
+		<div style="margin: 5px;">
+		<vwc-button style="width: 200px" appearance="filled" dropdown-indicator shape="pill" label="wide"></vwc-button>
+		<vwc-button style="width: 100px" appearance="filled" dropdown-indicator shape="pill" label="too small for label"></vwc-button>
+		<vwc-button appearance="filled" dropdown-indicator shape="pill" icon="user-line"></vwc-button>
 	</div>
 	<div style="margin: 5px;">
 		<vwc-button appearance="filled" dropdown-indicator label="expanded" aria-expanded="true"></vwc-button>
diff --git a/libs/components/src/lib/button/ui.test.ts-snapshots/snapshots-button-Desktop-Chromium-linux.png b/libs/components/src/lib/button/ui.test.ts-snapshots/snapshots-button-Desktop-Chromium-linux.png
index c45614146e..da7765763a 100644
Binary files a/libs/components/src/lib/button/ui.test.ts-snapshots/snapshots-button-Desktop-Chromium-linux.png and b/libs/components/src/lib/button/ui.test.ts-snapshots/snapshots-button-Desktop-Chromium-linux.png differ
diff --git a/libs/components/src/lib/button/ui.test.ts-snapshots/snapshots-button-Desktop-Firefox-linux.png b/libs/components/src/lib/button/ui.test.ts-snapshots/snapshots-button-Desktop-Firefox-linux.png
index 4f098d2213..0440c2380a 100644
Binary files a/libs/components/src/lib/button/ui.test.ts-snapshots/snapshots-button-Desktop-Firefox-linux.png and b/libs/components/src/lib/button/ui.test.ts-snapshots/snapshots-button-Desktop-Firefox-linux.png differ
diff --git a/libs/components/src/lib/button/ui.test.ts-snapshots/snapshots-button-Desktop-Safari-linux.png b/libs/components/src/lib/button/ui.test.ts-snapshots/snapshots-button-Desktop-Safari-linux.png
index 360ac27dcc..bc253e5e41 100644
Binary files a/libs/components/src/lib/button/ui.test.ts-snapshots/snapshots-button-Desktop-Safari-linux.png and b/libs/components/src/lib/button/ui.test.ts-snapshots/snapshots-button-Desktop-Safari-linux.png differ