Add icon to edit card overflow menu (#17293)

src/panels/lovelace/components/hui-card-options.ts

@@ -1,7 +1,15 @@
 import "@material/mwc-button";
 import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
-import "@material/mwc-list/mwc-list-item";
-import { mdiArrowDown, mdiArrowUp, mdiDotsVertical } from "@mdi/js";
+import {
+  mdiArrowDown,
+  mdiArrowUp,
+  mdiContentCopy,
+  mdiContentCut,
+  mdiContentDuplicate,
+  mdiDelete,
+  mdiDotsVertical,
+  mdiFileMoveOutline,
+} from "@mdi/js";
 import deepClone from "deep-clone-simple";
 import {
   CSSResultGroup,
@@ -17,11 +25,13 @@ import { storage } from "../../../common/decorators/storage";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-icon-button";
+import "../../../components/ha-list-item";
 import { LovelaceCardConfig, saveConfig } from "../../../data/lovelace";
 import {
   showAlertDialog,
   showPromptDialog,
 } from "../../../dialogs/generic/show-dialog-box";
+import { haStyle } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
 import { showSaveSuccessToast } from "../../../util/toast-saved-success";
 import { computeCardSize } from "../common/compute-card-size";
@@ -122,31 +132,51 @@ export class HuiCardOptions extends LitElement {
                 )}
                 .path=${mdiDotsVertical}
               ></ha-icon-button>
-              <mwc-list-item>
+              <ha-list-item graphic="icon">
+                <ha-svg-icon
+                  slot="graphic"
+                  .path=${mdiFileMoveOutline}
+                ></ha-svg-icon>
                 ${this.hass!.localize(
                   "ui.panel.lovelace.editor.edit_card.move"
-                )}</mwc-list-item
-              >
-              <mwc-list-item
-                >${this.hass!.localize(
+                )}
+              </ha-list-item>
+              <ha-list-item graphic="icon">
+                <ha-svg-icon
+                  slot="graphic"
+                  .path=${mdiContentDuplicate}
+                ></ha-svg-icon>
+                ${this.hass!.localize(
                   "ui.panel.lovelace.editor.edit_card.duplicate"
-                )}</mwc-list-item
-              >
-              <mwc-list-item
-                >${this.hass!.localize(
+                )}
+              </ha-list-item>
+              <ha-list-item graphic="icon">
+                <ha-svg-icon
+                  slot="graphic"
+                  .path=${mdiContentCopy}
+                ></ha-svg-icon>
+                ${this.hass!.localize(
                   "ui.panel.lovelace.editor.edit_card.copy"
-                )}</mwc-list-item
-              >
-              <mwc-list-item
-                >${this.hass!.localize(
-                  "ui.panel.lovelace.editor.edit_card.cut"
-                )}</mwc-list-item
-              >
-              <mwc-list-item class="delete-item">
+                )}
+              </ha-list-item>
+              <ha-list-item graphic="icon">
+                <ha-svg-icon
+                  slot="graphic"
+                  .path=${mdiContentCut}
+                ></ha-svg-icon>
+                ${this.hass!.localize("ui.panel.lovelace.editor.edit_card.cut")}
+              </ha-list-item>
+              <li divider role="separator"></li>
+              <ha-list-item class="warning" graphic="icon">
+                <ha-svg-icon
+                  class="warning"
+                  slot="graphic"
+                  .path=${mdiDelete}
+                ></ha-svg-icon>
                 ${this.hass!.localize(
                   "ui.panel.lovelace.editor.edit_card.delete"
-                )}</mwc-list-item
-              >
+                )}
+              </ha-list-item>
             </ha-button-menu>
           </div>
         </div>
@@ -155,7 +185,9 @@ export class HuiCardOptions extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    return css`
+    return [
+      haStyle,
+      css`
         :host(:hover) {
           outline: 2px solid var(--primary-color);
         }
@@ -205,15 +237,12 @@ export class HuiCardOptions extends LitElement {
           color: var(--disabled-text-color);
         }
 
-      mwc-list-item {
+        ha-list-item {
           cursor: pointer;
           white-space: nowrap;
         }
-
-      mwc-list-item.delete-item {
-        color: var(--error-color);
-      }
-    `;
+      `,
+    ];
   }
 
   private _handleAction(ev: CustomEvent<ActionDetail>) {

src/translations/en.json

@@ -4548,10 +4548,10 @@
             "add": "Add Card",
             "edit": "Edit",
             "clear": "Clear",
-            "delete": "Delete card",
-            "copy": "Copy card",
-            "cut": "Cut card",
-            "duplicate": "Duplicate card",
+            "delete": "Delete",
+            "copy": "Copy",
+            "cut": "Cut",
+            "duplicate": "Duplicate",
             "move": "Move to view",
             "move_up": "Move card up",
             "move_down": "Move card down",