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

@@ -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

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%;
         }
       `,

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;

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>`;