diff --git a/packages/calcite-components/src/components/combobox/combobox.scss b/packages/calcite-components/src/components/combobox/combobox.scss
index 388bbd217b1..15c8177f42e 100644
--- a/packages/calcite-components/src/components/combobox/combobox.scss
+++ b/packages/calcite-components/src/components/combobox/combobox.scss
@@ -150,9 +150,7 @@
.icon-end,
.icon-start {
- @apply flex
- w-4 cursor-pointer
- items-center;
+ @apply flex cursor-pointer items-center;
}
.icon-end {
diff --git a/packages/calcite-components/src/components/combobox/combobox.stories.ts b/packages/calcite-components/src/components/combobox/combobox.stories.ts
index 178a8f5d2aa..ab7675b0d14 100644
--- a/packages/calcite-components/src/components/combobox/combobox.stories.ts
+++ b/packages/calcite-components/src/components/combobox/combobox.stories.ts
@@ -497,21 +497,45 @@ export const clearDisabled_TestOnly = (): string => html`
`;
export const openInAllScales_TestOnly = (): string => html`
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+export const openWithPlaceholderIconInAllScales_TestOnly = (): string => html`
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`;
diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
index 92dad0b09d1..5edc5beb2e4 100644
--- a/packages/calcite-components/src/components/combobox/combobox.tsx
+++ b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -66,6 +66,7 @@ import { ComboboxChildElement } from "./interfaces";
import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, CSS } from "./resources";
import { getItemAncestors, getItemChildren, hasActiveChildren, isSingleLike } from "./utils";
import { XButton, CSS as XButtonCSS } from "../functional/XButton";
+import { getIconScale } from "../../utils/component";
interface ItemData {
label: string;
@@ -1294,7 +1295,7 @@ export class Combobox
class="selected-icon"
flipRtl={this.open && selectedItem ? selectedItem.iconFlipRtl : placeholderIconFlipRtl}
icon={!this.open && selectedItem ? selectedIcon : placeholderIcon}
- scale="s"
+ scale={getIconScale(this.scale)}
/>
)
@@ -1305,7 +1306,10 @@ export class Combobox
const { open } = this;
return (
-
+
);
}