Update drag icon (#27514)

2025-11-08 10:29:37 +00:00 · 2025-10-16 11:33:25 +02:00
parent 46d0eb4f44
commit d4c98cae3a
20 changed files with 91 additions and 42 deletions
--- a/src/components/data-table/dialog-data-table-settings.ts
+++ b/src/components/data-table/dialog-data-table-settings.ts
@@ -1,4 +1,4 @@
-import { mdiDrag, mdiEye, mdiEyeOff } from "@mdi/js";
+import { mdiDragHorizontalVariant, mdiEye, mdiEyeOff } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -129,7 +129,7 @@ export class DialogDataTableSettings extends LitElement {
                  ${canMove && isVisible
                    ? html`<ha-svg-icon
                        class="handle"
-                        .path=${mdiDrag}
+                        .path=${mdiDragHorizontalVariant}
                        slot="graphic"
                      ></ha-svg-icon>`
                    : nothing}
--- a/src/components/entity/ha-entities-picker.ts
+++ b/src/components/entity/ha-entities-picker.ts
@@ -1,13 +1,13 @@
-import { mdiDrag } from "@mdi/js";
+import { mdiDragHorizontalVariant } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { isValidEntityId } from "../../common/entity/valid_entity_id";
+import type { HaEntityPickerEntityFilterFunc } from "../../data/entity";
 import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import "../ha-sortable";
 import "./ha-entity-picker";
-import type { HaEntityPickerEntityFilterFunc } from "../../data/entity";

@customElement("ha-entities-picker")
 class HaEntitiesPicker extends LitElement {
@@ -118,7 +118,7 @@ class HaEntitiesPicker extends LitElement {
                  ? html`
                      <ha-svg-icon
                        class="entity-handle"
-                        .path=${mdiDrag}
+                        .path=${mdiDragHorizontalVariant}
                      ></ha-svg-icon>
                    `
                  : nothing}
--- a/src/components/entity/ha-entity-name-picker.ts
+++ b/src/components/entity/ha-entity-name-picker.ts
@@ -1,5 +1,5 @@
 import "@material/mwc-menu/mwc-menu-surface";
-import { mdiDrag, mdiPlus } from "@mdi/js";
+import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
 import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import type { IFuseOptions } from "fuse.js";
 import Fuse from "fuse.js";
@@ -201,7 +201,10 @@ export class HaEntityNamePicker extends LitElement {
                    .disabled=${this.disabled}
                    class=${!isValid ? "invalid" : ""}
                  >
-                    <ha-svg-icon slot="icon" .path=${mdiDrag}></ha-svg-icon>
+                    <ha-svg-icon
+                      slot="icon"
+                      .path=${mdiDragHorizontalVariant}
+                    ></ha-svg-icon>
                    <span>${label}</span>
                  </ha-input-chip>
                `;
--- a/src/components/entity/ha-entity-state-content-picker.ts
+++ b/src/components/entity/ha-entity-state-content-picker.ts
@@ -1,4 +1,4 @@
-import { mdiDrag } from "@mdi/js";
+import { mdiDragHorizontalVariant } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -195,7 +195,10 @@ class HaEntityStatePicker extends LitElement {
                        .label=${label}
                        selected
                      >
-                        <ha-svg-icon slot="icon" .path=${mdiDrag}></ha-svg-icon>
+                        <ha-svg-icon
+                          slot="icon"
+                          .path=${mdiDragHorizontalVariant}
+                        ></ha-svg-icon>
                        ${label}
                      </ha-input-chip>
                    `;
--- a/src/components/ha-areas-floors-display-editor.ts
+++ b/src/components/ha-areas-floors-display-editor.ts
@@ -1,4 +1,4 @@
-import { mdiDrag, mdiTextureBox } from "@mdi/js";
+import { mdiDragHorizontalVariant, mdiTextureBox } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -105,7 +105,7 @@ export class HaAreasFloorsDisplayEditor extends LitElement {
                      <ha-svg-icon
                        class="handle"
                        slot="icons"
-                        .path=${mdiDrag}
+                        .path=${mdiDragHorizontalVariant}
                      ></ha-svg-icon>
                    `}
                <ha-items-display-editor
--- a/src/components/ha-items-display-editor.ts
+++ b/src/components/ha-items-display-editor.ts
@@ -1,5 +1,5 @@
 import { ResizeController } from "@lit-labs/observers/resize-controller";
-import { mdiDrag, mdiEye, mdiEyeOff } from "@mdi/js";
+import { mdiDragHorizontalVariant, mdiEye, mdiEyeOff } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -178,7 +178,7 @@ export class HaItemDisplayEditor extends LitElement {
                            ? this._dragHandleKeydown
                            : undefined}
                          class="handle"
-                          .path=${mdiDrag}
+                          .path=${mdiDragHorizontalVariant}
                          slot="end"
                        ></ha-svg-icon>
                      `
--- a/src/components/ha-selector/ha-selector-object.ts
+++ b/src/components/ha-selector/ha-selector-object.ts
@@ -1,4 +1,9 @@
-import { mdiClose, mdiDelete, mdiDrag, mdiPencil } from "@mdi/js";
+import {
+  mdiClose,
+  mdiDelete,
+  mdiDragHorizontalVariant,
+  mdiPencil,
+} from "@mdi/js";
 import { css, html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -92,7 +97,7 @@ export class HaObjectSelector extends LitElement {
          ? html`
              <ha-svg-icon
                class="handle"
-                .path=${mdiDrag}
+                .path=${mdiDragHorizontalVariant}
                slot="start"
              ></ha-svg-icon>
            `
--- a/src/components/ha-selector/ha-selector-select.ts
+++ b/src/components/ha-selector/ha-selector-select.ts
@@ -1,4 +1,4 @@
-import { mdiDrag } from "@mdi/js";
+import { mdiDragHorizontalVariant } from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
@@ -197,7 +197,7 @@ export class HaSelectSelector extends LitElement {
                            ? html`
                                <ha-svg-icon
                                  slot="icon"
-                                  .path=${mdiDrag}
+                                  .path=${mdiDragHorizontalVariant}
                                ></ha-svg-icon>
                              `
                            : nothing}
--- a/src/panels/config/automation/action/ha-automation-action.ts
+++ b/src/panels/config/automation/action/ha-automation-action.ts
@@ -1,4 +1,4 @@
-import { mdiDrag, mdiPlus } from "@mdi/js";
+import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
 import deepClone from "deep-clone-simple";
 import type { PropertyValues } from "lit";
 import { LitElement, html, nothing } from "lit";
@@ -115,7 +115,9 @@ export default class HaAutomationAction extends LitElement {
                        @click=${stopPropagation}
                        .index=${idx}
                      >
-                        <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
+                        <ha-svg-icon
+                          .path=${mdiDragHorizontalVariant}
+                        ></ha-svg-icon>
                      </div>
                    `
                  : nothing}
--- a/src/panels/config/automation/condition/ha-automation-condition.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition.ts
@@ -1,4 +1,4 @@
-import { mdiDrag, mdiPlus } from "@mdi/js";
+import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
 import deepClone from "deep-clone-simple";
 import type { PropertyValues } from "lit";
 import { html, LitElement, nothing } from "lit";
@@ -193,7 +193,9 @@ export default class HaAutomationCondition extends LitElement {
                        @click=${stopPropagation}
                        .index=${idx}
                      >
-                        <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
+                        <ha-svg-icon
+                          .path=${mdiDragHorizontalVariant}
+                        ></ha-svg-icon>
                      </div>
                    `
                  : nothing}
--- a/src/panels/config/automation/option/ha-automation-option.ts
+++ b/src/panels/config/automation/option/ha-automation-option.ts
@@ -1,4 +1,4 @@
-import { mdiDrag, mdiPlus } from "@mdi/js";
+import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
 import deepClone from "deep-clone-simple";
 import type { PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -100,7 +100,9 @@ export default class HaAutomationOption extends LitElement {
                        @click=${stopPropagation}
                        .index=${idx}
                      >
-                        <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
+                        <ha-svg-icon
+                          .path=${mdiDragHorizontalVariant}
+                        ></ha-svg-icon>
                      </div>
                    `
                  : nothing}
--- a/src/panels/config/automation/trigger/ha-automation-trigger.ts
+++ b/src/panels/config/automation/trigger/ha-automation-trigger.ts
@@ -1,4 +1,4 @@
-import { mdiDrag, mdiPlus } from "@mdi/js";
+import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
 import deepClone from "deep-clone-simple";
 import type { PropertyValues } from "lit";
 import { html, LitElement, nothing } from "lit";
@@ -110,7 +110,9 @@ export default class HaAutomationTrigger extends LitElement {
                        @click=${stopPropagation}
                        .index=${idx}
                      >
-                        <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
+                        <ha-svg-icon
+                          .path=${mdiDragHorizontalVariant}
+                        ></ha-svg-icon>
                      </div>
                    `
                  : nothing}
--- a/src/panels/config/energy/components/ha-energy-device-settings.ts
+++ b/src/panels/config/energy/components/ha-energy-device-settings.ts
@@ -1,4 +1,10 @@
-import { mdiDelete, mdiDevices, mdiDrag, mdiPencil, mdiPlus } from "@mdi/js";
+import {
+  mdiDelete,
+  mdiDevices,
+  mdiDragHorizontalVariant,
+  mdiPencil,
+  mdiPlus,
+} from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { repeat } from "lit/directives/repeat";
@@ -89,7 +95,9 @@ export class EnergyDeviceSettings extends LitElement {
                (device) => html`
                  <div class="row" .device=${device}>
                    <div class="handle">
-                      <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
+                      <ha-svg-icon
+                        .path=${mdiDragHorizontalVariant}
+                      ></ha-svg-icon>
                    </div>
                    <span class="content"
                      >${device.name ||
--- a/src/panels/config/helpers/forms/ha-input_select-form.ts
+++ b/src/panels/config/helpers/forms/ha-input_select-form.ts
@@ -1,4 +1,4 @@
-import { mdiDelete, mdiDrag } from "@mdi/js";
+import { mdiDelete, mdiDragHorizontalVariant } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -111,7 +111,9 @@ class HaInputSelectForm extends LitElement {
                    <ha-list-item class="option" hasMeta>
                      <div class="optioncontent">
                        <div class="handle">
-                          <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
+                          <ha-svg-icon
+                            .path=${mdiDragHorizontalVariant}
+                          ></ha-svg-icon>
                        </div>
                        ${option}
                      </div>
--- a/src/panels/lovelace/cards/hui-todo-list-card.ts
+++ b/src/panels/lovelace/cards/hui-todo-list-card.ts
@@ -5,7 +5,7 @@ import {
  mdiDelete,
  mdiDeleteSweep,
  mdiDotsVertical,
-  mdiDrag,
+  mdiDragHorizontalVariant,
  mdiPlus,
  mdiSort,
 } from "@mdi/js";
@@ -522,7 +522,7 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
                        "ui.panel.lovelace.cards.todo-list.drag_and_drop"
                      )}
                      class="reorderButton handle"
-                      .path=${mdiDrag}
+                      .path=${mdiDragHorizontalVariant}
                      slot="meta"
                    >
                    </ha-svg-icon>
--- a/src/panels/lovelace/components/hui-entity-editor.ts
+++ b/src/panels/lovelace/components/hui-entity-editor.ts
@@ -1,4 +1,4 @@
-import { mdiClose, mdiDrag, mdiPencil } from "@mdi/js";
+import { mdiClose, mdiDragHorizontalVariant, mdiPencil } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
@@ -66,7 +66,11 @@ export class HuiEntityEditor extends LitElement {

    return html`
      <ha-md-list-item class="item">
-        <ha-svg-icon class="handle" .path=${mdiDrag} slot="start"></ha-svg-icon>
+        <ha-svg-icon
+          class="handle"
+          .path=${mdiDragHorizontalVariant}
+          slot="start"
+        ></ha-svg-icon>

        <div slot="headline" class="label">${primary}</div>
        ${secondary
@@ -152,7 +156,9 @@ export class HuiEntityEditor extends LitElement {
                (entityConf, index) => html`
                  <div class="entity" data-entity-id=${entityConf.entity}>
                    <div class="handle">
-                      <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
+                      <ha-svg-icon
+                        .path=${mdiDragHorizontalVariant}
+                      ></ha-svg-icon>
                    </div>
                    <ha-entity-picker
                      .hass=${this.hass}
--- a/src/panels/lovelace/components/hui-section-edit-mode.ts
+++ b/src/panels/lovelace/components/hui-section-edit-mode.ts
@@ -1,4 +1,4 @@
-import { mdiDelete, mdiDrag, mdiPencil } from "@mdi/js";
+import { mdiDelete, mdiDragHorizontalVariant, mdiPencil } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -31,7 +31,7 @@ export class HuiSectionEditMode extends LitElement {
          <ha-svg-icon
            aria-hidden="true"
            class="handle"
-            .path=${mdiDrag}
+            .path=${mdiDragHorizontalVariant}
          ></ha-svg-icon>
          <ha-icon-button
            .label=${this.hass.localize("ui.common.edit")}
--- a/src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts
@@ -1,4 +1,9 @@
-import { mdiDelete, mdiDrag, mdiPencil, mdiPlus } from "@mdi/js";
+import {
+  mdiDelete,
+  mdiDragHorizontalVariant,
+  mdiPencil,
+  mdiPlus,
+} from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
@@ -345,7 +350,9 @@ export class HuiCardFeaturesEditor extends LitElement {
              return html`
                <div class="feature">
                  <div class="handle">
-                    <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
+                    <ha-svg-icon
+                      .path=${mdiDragHorizontalVariant}
+                    ></ha-svg-icon>
                  </div>
                  <div class="feature-content">
                    <div>
--- a/src/panels/lovelace/editor/config-elements/hui-heading-badges-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-heading-badges-editor.ts
@@ -1,5 +1,10 @@
 import "@material/mwc-menu/mwc-menu-surface";
-import { mdiDelete, mdiDrag, mdiPencil, mdiPlus } from "@mdi/js";
+import {
+  mdiDelete,
+  mdiDragHorizontalVariant,
+  mdiPencil,
+  mdiPlus,
+} from "@mdi/js";
 import type { ComboBoxLightOpenedChangedEvent } from "@vaadin/combo-box/vaadin-combo-box-light";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -86,7 +91,9 @@ export class HuiHeadingBadgesEditor extends LitElement {
                    return html`
                      <div class="badge">
                        <div class="handle">
-                          <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
+                          <ha-svg-icon
+                            .path=${mdiDragHorizontalVariant}
+                          ></ha-svg-icon>
                        </div>
                        <div class="badge-content">
                          <span>${label}</span>
--- a/src/panels/lovelace/editor/hui-entities-card-row-editor.ts
+++ b/src/panels/lovelace/editor/hui-entities-card-row-editor.ts
@@ -1,4 +1,4 @@
-import { mdiClose, mdiDrag, mdiPencil } from "@mdi/js";
+import { mdiClose, mdiDragHorizontalVariant, mdiPencil } from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
@@ -59,7 +59,7 @@ export class HuiEntitiesCardRowEditor extends LitElement {
            (entityConf, index) => html`
              <div class="entity">
                <div class="handle">
-                  <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
+                  <ha-svg-icon .path=${mdiDragHorizontalVariant}></ha-svg-icon>
                </div>
                ${entityConf.type
                  ? html`