From 31c0850b14dafa1685c634a0089fada7090118aa Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Thu, 28 Mar 2024 11:45:41 +0100
Subject: [PATCH] Add default icons to categories (#20215)

* Add default icons to categories

* Update ha-filter-categories.ts

* smaller graphic margin in filters
---
 src/components/ha-filter-categories.ts           | 15 +++++++++++++--
 src/components/ha-filter-entities.ts             |  1 +
 src/components/ha-filter-floor-areas.ts          |  3 +++
 src/panels/config/category/ha-category-picker.ts |  3 ++-
 4 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/ha-filter-categories.ts b/src/components/ha-filter-categories.ts
index 4824305fa9..571c6b27ff 100644
--- a/src/components/ha-filter-categories.ts
+++ b/src/components/ha-filter-categories.ts
@@ -1,5 +1,11 @@
 import { ActionDetail, SelectedDetail } from "@material/mwc-list";
-import { mdiDelete, mdiDotsVertical, mdiPencil, mdiPlus } from "@mdi/js";
+import {
+  mdiDelete,
+  mdiDotsVertical,
+  mdiPencil,
+  mdiPlus,
+  mdiTag,
+} from "@mdi/js";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -17,6 +23,7 @@ import type { HomeAssistant } from "../types";
 import "./ha-expansion-panel";
 import "./ha-icon";
 import "./ha-list-item";
+import { stopPropagation } from "../common/dom/stop_propagation";
 
 @customElement("ha-filter-categories")
 export class HaFilterCategories extends SubscribeMixin(LitElement) {
@@ -90,9 +97,13 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
                             slot="graphic"
                             .icon=${category.icon}
                           ></ha-icon>`
-                        : nothing}
+                        : html`<ha-svg-icon
+                            .path=${mdiTag}
+                            slot="graphic"
+                          ></ha-svg-icon>`}
                       ${category.name}
                       <ha-button-menu
+                        @click=${stopPropagation}
                         @action=${this._handleAction}
                         slot="meta"
                         fixed
diff --git a/src/components/ha-filter-entities.ts b/src/components/ha-filter-entities.ts
index 94c98b87e8..c2948451d9 100644
--- a/src/components/ha-filter-entities.ts
+++ b/src/components/ha-filter-entities.ts
@@ -206,6 +206,7 @@ export class HaFilterEntities extends LitElement {
           color: var(--text-accent-color, var(--text-primary-color));
         }
         ha-check-list-item {
+          --mdc-list-item-graphic-margin: 16px;
           width: 100%;
         }
       `,
diff --git a/src/components/ha-filter-floor-areas.ts b/src/components/ha-filter-floor-areas.ts
index a4a67869fc..a90fba10f0 100644
--- a/src/components/ha-filter-floor-areas.ts
+++ b/src/components/ha-filter-floor-areas.ts
@@ -268,6 +268,9 @@ export class HaFilterFloorAreas extends SubscribeMixin(LitElement) {
           padding: 0px 2px;
           color: var(--text-accent-color, var(--text-primary-color));
         }
+        ha-check-list-item {
+          --mdc-list-item-graphic-margin: 16px;
+        }
         .floor {
           padding-left: 32px;
           padding-inline-start: 32px;
diff --git a/src/panels/config/category/ha-category-picker.ts b/src/panels/config/category/ha-category-picker.ts
index f07fdfcc5b..583eaf4f44 100644
--- a/src/panels/config/category/ha-category-picker.ts
+++ b/src/panels/config/category/ha-category-picker.ts
@@ -1,3 +1,4 @@
+import { mdiTag } from "@mdi/js";
 import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { html, LitElement, nothing, PropertyValues } from "lit";
@@ -35,7 +36,7 @@ const rowRenderer: ComboBoxLitRenderer<CategoryRegistryEntry> = (item) =>
   >
     ${item.icon
       ? html`<ha-icon slot="graphic" .icon=${item.icon}></ha-icon>`
-      : nothing}
+      : html`<ha-svg-icon .path=${mdiTag} slot="graphic"></ha-svg-icon>`}
     ${item.name}
   </ha-list-item>`;