siemens · danielleroux · Nov 7, 2025 · Jul 28, 2025 · Jul 28, 2025 · Jul 30, 2025
diff --git a/.changeset/happy-suns-report.md b/.changeset/happy-suns-report.md
@@ -0,0 +1,5 @@
+---
+"@siemens/ix": patch
+---
+
+Prevent empty space if no icon is shown in __category-filter__.
diff --git a/packages/core/scss/mixins/_input.scss b/packages/core/scss/mixins/_input.scss
@@ -9,11 +9,11 @@
 @use './fonts';
 @use './validation/form-component';
 
-@mixin element-input($feature-read-only: true) {
+@mixin element-input($feature-read-only: true, $padding: 0.25rem 0.5rem) {
   & {
     min-height: 2rem;
     width: auto;
-    padding: 0.25rem 0.5rem;
+    padding: $padding;
     background-color: var(--theme-input--background);
     color: var(--theme-input--color);
     appearance: textfield;

diff --git a/packages/core/src/components/category-filter/category-filter.scss b/packages/core/src/components/category-filter/category-filter.scss
@@ -36,8 +36,25 @@
   }
 
   .input-container {
-    &:not(.readonly):not(.disabled) {
-      @include input.element-input('false');
+    $padding-with-icon: 1px vars.$large-space 1px 1.75rem;
+    $padding-no-icon: 1px vars.$large-space 1px vars.$tiny-space;
+
+    &:not(.readonly) {
+      &:not(.no-icon) {
+        @include input.element-input(false, $padding-with-icon);
+      }
+      &.no-icon {
+        @include input.element-input(false, $padding-no-icon);
+      }
+    }
+
+    &.readonly {
+      &:not(.no-icon) {
+        @include input.element-input(true, $padding-with-icon);
+      }
+      &.no-icon {
+        @include input.element-input(true, $padding-no-icon);
+      }
     }
 
     &:not(.readonly):not(.disabled):hover {
@@ -57,18 +74,9 @@
         var(--theme-input--border-color-bottom--disabled);
     }
 
-    &.readonly {
-      @include input.element-input;
-    }
-
     display: flex;
     height: auto;
     max-height: 3.75rem;
-    padding: 1px vars.$large-space 1px 1.75rem !important;
-
-    &.no-icon {
-      padding-left: vars.$tiny-space;
-    }
   }
 
   .token-container {

diff --git a/...filter.e2e.ts/category-filter-basic-no-icon-1-chromium---classic-dark-linux.png b/...filter.e2e.ts/category-filter-basic-no-icon-1-chromium---classic-dark-linux.png
diff --git a/...ilter.e2e.ts/category-filter-basic-no-icon-1-chromium---classic-light-linux.png b/...ilter.e2e.ts/category-filter-basic-no-icon-1-chromium---classic-light-linux.png
diff --git a/...ry-filter.e2e.ts/category-filter-categories-1-chromium---classic-dark-linux.png b/...ry-filter.e2e.ts/category-filter-categories-1-chromium---classic-dark-linux.png
diff --git a/...y-filter.e2e.ts/category-filter-categories-1-chromium---classic-light-linux.png b/...y-filter.e2e.ts/category-filter-categories-1-chromium---classic-light-linux.png
diff --git a/...ter.e2e.ts/category-filter-category-options-1-chromium---classic-dark-linux.png b/...ter.e2e.ts/category-filter-category-options-1-chromium---classic-dark-linux.png
diff --git a/...er.e2e.ts/category-filter-category-options-1-chromium---classic-light-linux.png b/...er.e2e.ts/category-filter-category-options-1-chromium---classic-light-linux.png
diff --git a/...ategory-filter-dropdown-opens-on-text-input-1-chromium---classic-dark-linux.png b/...ategory-filter-dropdown-opens-on-text-input-1-chromium---classic-dark-linux.png
diff --git a/...tegory-filter-dropdown-opens-on-text-input-1-chromium---classic-light-linux.png b/...tegory-filter-dropdown-opens-on-text-input-1-chromium---classic-light-linux.png
diff --git a/...-dropdown-stays-open-after-filter-selection-1-chromium---classic-dark-linux.png b/...-dropdown-stays-open-after-filter-selection-1-chromium---classic-dark-linux.png
diff --git a/...dropdown-stays-open-after-filter-selection-1-chromium---classic-light-linux.png b/...dropdown-stays-open-after-filter-selection-1-chromium---classic-light-linux.png
diff --git a/testing/visual-testing/tests/category-filter/basic-no-icon/index.html b/testing/visual-testing/tests/category-filter/basic-no-icon/index.html
@@ -0,0 +1,38 @@
+<!--
+SPDX-FileCopyrightText: 2024 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Stencil Component Starter</title>
+  </head>
+  <body>
+    <ix-category-filter
+      placeholder="Filter by.."
+      hide-icon
+    ></ix-category-filter>
+    <script type="module">
+      (async () => {
+        await window.customElements.whenDefined('ix-category-filter');
+        const categoryFilter = document.querySelector('ix-category-filter');
+        categoryFilter.suggestions = [
+          'Option A',
+          'Option B',
+          'Option C',
+          'Option D',
+          'Option E',
+          'Option F',
+        ];
+      })();
+    </script>
+    <script src="./../../utils/test/runtime/main.ts" type="module"></script>
+  </body>
+</html>
diff --git a/testing/visual-testing/tests/category-filter/category-filter.e2e.ts b/testing/visual-testing/tests/category-filter/category-filter.e2e.ts
@@ -18,6 +18,13 @@ regressionTest.describe('category-filter', () => {
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
   });
 
+  regressionTest('basic-no-icon', async ({ page }) => {
+    await page.goto('category-filter/basic-no-icon');
+    await page.locator('input').click();
+
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
+
   regressionTest('categories', async ({ page }) => {
     await page.goto('category-filter/categories');
     await page.locator('input').first().click();