From 5971aee02e67358f9a6c12d2b37b5c4ff437aba9 Mon Sep 17 00:00:00 2001
From: Tomasz <t.jagusz@gmail.com>
Date: Mon, 5 Oct 2020 19:51:14 +0200
Subject: [PATCH] dot notation for path property of ha-svg-icon (#7197)

---
 hassio/src/addon-store/hassio-addon-store.ts  |  2 +-
 .../src/addon-view/info/hassio-addon-info.ts  | 24 +++++++++----------
 .../dialog-hassio-repositories.ts             |  2 +-
 .../snapshot/dialog-hassio-snapshot.ts        | 11 +++++----
 .../src/ingress-view/hassio-ingress-view.ts   |  2 +-
 hassio/src/snapshots/hassio-snapshots.ts      |  2 +-
 src/common/search/search-input.ts             |  4 ++--
 src/components/ha-date-range-picker.ts        |  2 +-
 src/components/ha-dialog.ts                   |  2 +-
 src/components/ha-menu-button.ts              |  2 +-
 .../config/areas/ha-config-areas-dashboard.ts |  2 +-
 .../action/ha-automation-action-row.ts        |  6 ++---
 .../types/ha-automation-action-choose.ts      |  2 +-
 .../condition/ha-automation-condition-row.ts  |  2 +-
 .../config/automation/ha-automation-editor.ts |  2 +-
 .../config/automation/ha-automation-picker.ts |  2 +-
 .../trigger/ha-automation-trigger-row.ts      |  2 +-
 .../config/entities/ha-config-entities.ts     |  2 +-
 .../config/helpers/ha-config-helpers.ts       |  2 +-
 .../integrations/ha-config-integrations.ts    |  4 ++--
 .../integrations/ha-integration-card.ts       |  2 +-
 .../zha/zha-config-dashboard.ts               |  2 +-
 .../zha/zha-groups-dashboard.ts               |  2 +-
 .../ha-config-lovelace-dashboards.ts          |  2 +-
 .../resources/ha-config-lovelace-resources.ts |  2 +-
 src/panels/config/person/ha-config-person.ts  |  2 +-
 src/panels/config/scene/ha-scene-dashboard.ts |  2 +-
 src/panels/config/scene/ha-scene-editor.ts    |  2 +-
 src/panels/config/script/ha-script-editor.ts  |  2 +-
 src/panels/config/script/ha-script-picker.ts  |  2 +-
 src/panels/config/tags/ha-config-tags.ts      |  2 +-
 src/panels/config/users/ha-config-users.ts    |  2 +-
 src/panels/config/zone/ha-config-zone.ts      |  2 +-
 src/panels/logbook/ha-panel-logbook.ts        |  2 +-
 .../lovelace/components/hui-card-options.ts   |  6 ++---
 .../card-editor/hui-dialog-edit-card.ts       |  2 +-
 .../lovelace/editor/hui-dialog-save-config.ts |  2 +-
 .../unused-entities/hui-unused-entities.ts    |  2 +-
 src/panels/lovelace/hui-root.ts               | 16 ++++++-------
 src/panels/lovelace/views/hui-masonry-view.ts |  2 +-
 src/panels/lovelace/views/hui-panel-view.ts   |  2 +-
 41 files changed, 71 insertions(+), 68 deletions(-)

diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts
index 81c761b1f8..10a319cdba 100644
--- a/hassio/src/addon-store/hassio-addon-store.ts
+++ b/hassio/src/addon-store/hassio-addon-store.ts
@@ -105,7 +105,7 @@ class HassioAddonStore extends LitElement {
           @action=${this._handleAction}
         >
           <mwc-icon-button slot="trigger" alt="menu">
-            <ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
+            <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
           </mwc-icon-button>
           <mwc-list-item>
             Repositories
diff --git a/hassio/src/addon-view/info/hassio-addon-info.ts b/hassio/src/addon-view/info/hassio-addon-info.ts
index 1de072ee99..94058c87c9 100644
--- a/hassio/src/addon-view/info/hassio-addon-info.ts
+++ b/hassio/src/addon-view/info/hassio-addon-info.ts
@@ -69,7 +69,7 @@ const STAGE_ICON = {
 const PERMIS_DESC = {
   stage: {
     title: "Add-on Stage",
-    description: `Add-ons can have one of three stages:\n\n<ha-svg-icon path='${STAGE_ICON.stable}'></ha-svg-icon> **Stable**: These are add-ons ready to be used in production.\n\n<ha-svg-icon path='${STAGE_ICON.experimental}'></ha-svg-icon> **Experimental**: These may contain bugs, and may be unfinished.\n\n<ha-svg-icon path='${STAGE_ICON.deprecated}'></ha-svg-icon> **Deprecated**: These add-ons will no longer receive any updates.`,
+    description: `Add-ons can have one of three stages:\n\n<ha-svg-icon .path='${STAGE_ICON.stable}'></ha-svg-icon> **Stable**: These are add-ons ready to be used in production.\n\n<ha-svg-icon .path='${STAGE_ICON.experimental}'></ha-svg-icon> **Experimental**: These may contain bugs, and may be unfinished.\n\n<ha-svg-icon .path='${STAGE_ICON.deprecated}'></ha-svg-icon> **Deprecated**: These add-ons will no longer receive any updates.`,
   },
   rating: {
     title: "Add-on Security Rating",
@@ -202,14 +202,14 @@ class HassioAddonInfo extends LitElement {
                           <ha-svg-icon
                             title="Add-on is running"
                             class="running"
-                            path=${mdiCircle}
+                            .path=${mdiCircle}
                           ></ha-svg-icon>
                         `
                       : html`
                           <ha-svg-icon
                             title="Add-on is stopped"
                             class="stopped"
-                            path=${mdiCircle}
+                            .path=${mdiCircle}
                           ></ha-svg-icon>
                         `}
                   `
@@ -283,7 +283,7 @@ class HassioAddonInfo extends LitElement {
                     label="host"
                     description=""
                   >
-                    <ha-svg-icon path=${mdiNetwork}></ha-svg-icon>
+                    <ha-svg-icon .path=${mdiNetwork}></ha-svg-icon>
                   </ha-label-badge>
                 `
               : ""}
@@ -295,7 +295,7 @@ class HassioAddonInfo extends LitElement {
                     label="hardware"
                     description=""
                   >
-                    <ha-svg-icon path=${mdiChip}></ha-svg-icon>
+                    <ha-svg-icon .path=${mdiChip}></ha-svg-icon>
                   </ha-label-badge>
                 `
               : ""}
@@ -307,7 +307,7 @@ class HassioAddonInfo extends LitElement {
                     label="hass"
                     description=""
                   >
-                    <ha-svg-icon path=${mdiHomeAssistant}></ha-svg-icon>
+                    <ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>
                   </ha-label-badge>
                 `
               : ""}
@@ -319,7 +319,7 @@ class HassioAddonInfo extends LitElement {
                     label="hassio"
                     .description=${this.addon.hassio_role}
                   >
-                    <ha-svg-icon path=${mdiHomeAssistant}></ha-svg-icon>
+                    <ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>
                   </ha-label-badge>
                 `
               : ""}
@@ -331,7 +331,7 @@ class HassioAddonInfo extends LitElement {
                     label="docker"
                     description=""
                   >
-                    <ha-svg-icon path=${mdiDocker}></ha-svg-icon>
+                    <ha-svg-icon .path=${mdiDocker}></ha-svg-icon>
                   </ha-label-badge>
                 `
               : ""}
@@ -343,7 +343,7 @@ class HassioAddonInfo extends LitElement {
                     label="host pid"
                     description=""
                   >
-                    <ha-svg-icon path=${mdiPound}></ha-svg-icon>
+                    <ha-svg-icon .path=${mdiPound}></ha-svg-icon>
                   </ha-label-badge>
                 `
               : ""}
@@ -356,7 +356,7 @@ class HassioAddonInfo extends LitElement {
                     label="apparmor"
                     description=""
                   >
-                    <ha-svg-icon path=${mdiShield}></ha-svg-icon>
+                    <ha-svg-icon .path=${mdiShield}></ha-svg-icon>
                   </ha-label-badge>
                 `
               : ""}
@@ -368,7 +368,7 @@ class HassioAddonInfo extends LitElement {
                     label="auth"
                     description=""
                   >
-                    <ha-svg-icon path=${mdiKey}></ha-svg-icon>
+                    <ha-svg-icon .path=${mdiKey}></ha-svg-icon>
                   </ha-label-badge>
                 `
               : ""}
@@ -381,7 +381,7 @@ class HassioAddonInfo extends LitElement {
                     description=""
                   >
                     <ha-svg-icon
-                      path=${mdiCursorDefaultClickOutline}
+                      .path=${mdiCursorDefaultClickOutline}
                     ></ha-svg-icon>
                   </ha-label-badge>
                 `
diff --git a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
index 150fc2b181..8149e97744 100644
--- a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
+++ b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
@@ -91,7 +91,7 @@ class HassioRepositoriesDialog extends LitElement {
                       title="Remove"
                       @click=${this._removeRepository}
                     >
-                      <ha-svg-icon path=${mdiDelete}></ha-svg-icon>
+                      <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
                     </mwc-icon-button>
                   </paper-item>
                 `;
diff --git a/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts b/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts
index 790ebc467c..d8ac3eb3e4 100755
--- a/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts
+++ b/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts
@@ -196,7 +196,7 @@ class HassioSnapshotDialog extends LitElement {
               @click=${this._downloadClicked}
               slot="primaryAction"
             >
-              <ha-svg-icon path=${mdiDownload} class="icon"></ha-svg-icon>
+              <ha-svg-icon .path=${mdiDownload} class="icon"></ha-svg-icon>
               Download Snapshot
             </mwc-button>`
           : ""}
@@ -205,7 +205,7 @@ class HassioSnapshotDialog extends LitElement {
           @click=${this._partialRestoreClicked}
           slot="secondaryAction"
         >
-          <ha-svg-icon path=${mdiHistory} class="icon"></ha-svg-icon>
+          <ha-svg-icon .path=${mdiHistory} class="icon"></ha-svg-icon>
           Restore Selected
         </mwc-button>
         ${this._snapshot.type === "full"
@@ -214,7 +214,7 @@ class HassioSnapshotDialog extends LitElement {
                 @click=${this._fullRestoreClicked}
                 slot="secondaryAction"
               >
-                <ha-svg-icon path=${mdiHistory} class="icon"></ha-svg-icon>
+                <ha-svg-icon .path=${mdiHistory} class="icon"></ha-svg-icon>
                 Wipe &amp; restore
               </mwc-button>
             `
@@ -224,7 +224,10 @@ class HassioSnapshotDialog extends LitElement {
               @click=${this._deleteClicked}
               slot="secondaryAction"
             >
-              <ha-svg-icon path=${mdiDelete} class="icon warning"></ha-svg-icon>
+              <ha-svg-icon
+                .path=${mdiDelete}
+                class="icon warning"
+              ></ha-svg-icon>
               <span class="warning">Delete Snapshot</span>
             </mwc-button>`
           : ""}
diff --git a/hassio/src/ingress-view/hassio-ingress-view.ts b/hassio/src/ingress-view/hassio-ingress-view.ts
index 8780d9617d..ec899c7094 100644
--- a/hassio/src/ingress-view/hassio-ingress-view.ts
+++ b/hassio/src/ingress-view/hassio-ingress-view.ts
@@ -57,7 +57,7 @@ class HassioIngressView extends LitElement {
               aria-label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
               @click=${this._toggleMenu}
             >
-              <ha-svg-icon path=${mdiMenu}></ha-svg-icon>
+              <ha-svg-icon .path=${mdiMenu}></ha-svg-icon>
             </mwc-icon-button>
             <div class="main-title">${this._addon.name}</div>
           </div>
diff --git a/hassio/src/snapshots/hassio-snapshots.ts b/hassio/src/snapshots/hassio-snapshots.ts
index ff3ae86938..96dd6caecf 100644
--- a/hassio/src/snapshots/hassio-snapshots.ts
+++ b/hassio/src/snapshots/hassio-snapshots.ts
@@ -117,7 +117,7 @@ class HassioSnapshots extends LitElement {
           @action=${this._handleAction}
         >
           <mwc-icon-button slot="trigger" alt="menu">
-            <ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
+            <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
           </mwc-icon-button>
           <mwc-list-item>
             Reload
diff --git a/src/common/search/search-input.ts b/src/common/search/search-input.ts
index 1d52dbcde6..0b0038b9af 100644
--- a/src/common/search/search-input.ts
+++ b/src/common/search/search-input.ts
@@ -52,7 +52,7 @@ class SearchInput extends LitElement {
         .noLabelFloat=${this.noLabelFloat}
       >
         <ha-svg-icon
-          path=${mdiMagnify}
+          .path=${mdiMagnify}
           slot="prefix"
           class="prefix"
         ></ha-svg-icon>
@@ -65,7 +65,7 @@ class SearchInput extends LitElement {
             alt="Clear"
             title="Clear"
           >
-            <ha-svg-icon path=${mdiClose}></ha-svg-icon>
+            <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
           </mwc-icon-button>
         `}
       </paper-input>
diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts
index 884c893d56..895a33f984 100644
--- a/src/components/ha-date-range-picker.ts
+++ b/src/components/ha-date-range-picker.ts
@@ -60,7 +60,7 @@ export class HaDateRangePicker extends LitElement {
         ?ranges=${this.ranges !== undefined}
       >
         <div slot="input" class="date-range-inputs">
-          <ha-svg-icon path=${mdiCalendar}></ha-svg-icon>
+          <ha-svg-icon .path=${mdiCalendar}></ha-svg-icon>
           <paper-input
             .value=${formatDateTime(this.startDate, this.hass.language)}
             .label=${this.hass.localize(
diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts
index 8c34add0e3..c94fbb2115 100644
--- a/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@@ -17,7 +17,7 @@ export const createCloseHeading = (hass: HomeAssistant, title: string) => html`
     class="header_button"
     dir=${computeRTLDirection(hass)}
   >
-    <ha-svg-icon path=${mdiClose}></ha-svg-icon>
+    <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
   </mwc-icon-button>
 `;
 
diff --git a/src/components/ha-menu-button.ts b/src/components/ha-menu-button.ts
index 7531c989d9..6c2b148c4b 100644
--- a/src/components/ha-menu-button.ts
+++ b/src/components/ha-menu-button.ts
@@ -62,7 +62,7 @@ class HaMenuButton extends LitElement {
         aria-label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
         @click=${this._toggleMenu}
       >
-        <ha-svg-icon path=${mdiMenu}></ha-svg-icon>
+        <ha-svg-icon .path=${mdiMenu}></ha-svg-icon>
       </mwc-icon-button>
       ${hasNotifications ? html` <div class="dot"></div> ` : ""}
     `;
diff --git a/src/panels/config/areas/ha-config-areas-dashboard.ts b/src/panels/config/areas/ha-config-areas-dashboard.ts
index 3b2262ee75..b8b16d2933 100644
--- a/src/panels/config/areas/ha-config-areas-dashboard.ts
+++ b/src/panels/config/areas/ha-config-areas-dashboard.ts
@@ -130,7 +130,7 @@ export class HaConfigAreasDashboard extends LitElement {
           )}"
           @click=${this._createArea}
         >
-          <ha-svg-icon slot="icon" path=${mdiPlus}></ha-svg-icon>
+          <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
         </mwc-fab>
       </hass-tabs-subpage-data-table>
     `;
diff --git a/src/panels/config/automation/action/ha-automation-action-row.ts b/src/panels/config/automation/action/ha-automation-action-row.ts
index f9f82bbd5b..e4cfebe8c7 100644
--- a/src/panels/config/automation/action/ha-automation-action-row.ts
+++ b/src/panels/config/automation/action/ha-automation-action-row.ts
@@ -133,7 +133,7 @@ export default class HaAutomationActionRow extends LitElement {
                     )}
                     @click=${this._moveUp}
                   >
-                    <ha-svg-icon path=${mdiArrowUp}></ha-svg-icon>
+                    <ha-svg-icon .path=${mdiArrowUp}></ha-svg-icon>
                   </mwc-icon-button>
                 `
               : ""}
@@ -148,7 +148,7 @@ export default class HaAutomationActionRow extends LitElement {
                     )}
                     @click=${this._moveDown}
                   >
-                    <ha-svg-icon path=${mdiArrowDown}></ha-svg-icon>
+                    <ha-svg-icon .path=${mdiArrowDown}></ha-svg-icon>
                   </mwc-icon-button>
                 `
               : ""}
@@ -157,7 +157,7 @@ export default class HaAutomationActionRow extends LitElement {
                 slot="trigger"
                 .title=${this.hass.localize("ui.common.menu")}
                 .label=${this.hass.localize("ui.common.overflow_menu")}
-                ><ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
+                ><ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
               </mwc-icon-button>
               <mwc-list-item .disabled=${!this._uiModeAvailable}>
                 ${yamlMode
diff --git a/src/panels/config/automation/action/types/ha-automation-action-choose.ts b/src/panels/config/automation/action/types/ha-automation-action-choose.ts
index fa1f52f349..bb9ac0f8a6 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-choose.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-choose.ts
@@ -40,7 +40,7 @@ export class HaChooseAction extends LitElement implements ActionElement {
               "ui.panel.config.automation.editor.actions.type.choose.remove_option"
             )}
           >
-            <ha-svg-icon path=${mdiDelete}></ha-svg-icon>
+            <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
           </mwc-icon-button>
           <div class="card-content">
             <h2>
diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts
index 89bbfcab54..1c9b1552a3 100644
--- a/src/panels/config/automation/condition/ha-automation-condition-row.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts
@@ -71,7 +71,7 @@ export default class HaAutomationConditionRow extends LitElement {
                 .title=${this.hass.localize("ui.common.menu")}
                 .label=${this.hass.localize("ui.common.overflow_menu")}
                 slot="trigger"
-                ><ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon
+                ><ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon
               ></mwc-icon-button>
               <mwc-list-item>
                 ${this._yamlMode
diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts
index 5a39e7eac8..b93ac477f6 100644
--- a/src/panels/config/automation/ha-automation-editor.ts
+++ b/src/panels/config/automation/ha-automation-editor.ts
@@ -342,7 +342,7 @@ export class HaAutomationEditor extends LitElement {
           .title=${this.hass.localize("ui.panel.config.automation.editor.save")}
           @click=${this._saveAutomation}
         >
-          <ha-svg-icon slot="icon" path=${mdiContentSave}></ha-svg-icon>
+          <ha-svg-icon slot="icon" .path=${mdiContentSave}></ha-svg-icon>
         </mwc-fab>
       </hass-tabs-subpage>
     `;
diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts
index d95e80f079..6f617ad2b9 100644
--- a/src/panels/config/automation/ha-automation-picker.ts
+++ b/src/panels/config/automation/ha-automation-picker.ts
@@ -176,7 +176,7 @@ class HaAutomationPicker extends LitElement {
           )}
           @click=${this._createNew}
         >
-          <ha-svg-icon slot="icon" path=${mdiPlus}></ha-svg-icon>
+          <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
         </mwc-fab>
       </hass-tabs-subpage-data-table>
     `;
diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
index aa80ff1a96..687889c634 100644
--- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
+++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
@@ -102,7 +102,7 @@ export default class HaAutomationTriggerRow extends LitElement {
                 slot="trigger"
                 .title=${this.hass.localize("ui.common.menu")}
                 .label=${this.hass.localize("ui.common.overflow_menu")}
-                ><ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon
+                ><ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon
               ></mwc-icon-button>
               <mwc-list-item .disabled=${selected === -1}>
                 ${yamlMode
diff --git a/src/panels/config/entities/ha-config-entities.ts b/src/panels/config/entities/ha-config-entities.ts
index 366c852fa9..c458191d8e 100644
--- a/src/panels/config/entities/ha-config-entities.ts
+++ b/src/panels/config/entities/ha-config-entities.ts
@@ -463,7 +463,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
                 "ui.panel.config.entities.picker.filter.filter"
               )}
             >
-              <ha-svg-icon path=${mdiFilterVariant}></ha-svg-icon>
+              <ha-svg-icon .path=${mdiFilterVariant}></ha-svg-icon>
             </mwc-icon-button>
             <mwc-list-item
               @request-selected="${this._showDisabledChanged}"
diff --git a/src/panels/config/helpers/ha-config-helpers.ts b/src/panels/config/helpers/ha-config-helpers.ts
index fe96b3389e..02e5eef9a4 100644
--- a/src/panels/config/helpers/ha-config-helpers.ts
+++ b/src/panels/config/helpers/ha-config-helpers.ts
@@ -164,7 +164,7 @@ export class HaConfigHelpers extends LitElement {
           )}"
           @click=${this._createHelpler}
         >
-          <ha-svg-icon slot="icon" path=${mdiPlus}></ha-svg-icon>
+          <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
         </mwc-fab>
       </hass-tabs-subpage-data-table>
     `;
diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts
index 99d7f6b266..744b3d0e8e 100644
--- a/src/panels/config/integrations/ha-config-integrations.ts
+++ b/src/panels/config/integrations/ha-config-integrations.ts
@@ -287,7 +287,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
             .label=${this.hass.localize("ui.common.overflow_menu")}
             slot="trigger"
           >
-            <ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
+            <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
           </mwc-icon-button>
           <mwc-list-item>
             ${this.hass.localize(
@@ -480,7 +480,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
           title=${this.hass.localize("ui.panel.config.integrations.new")}
           @click=${this._createFlow}
         >
-          <ha-svg-icon slot="icon" path=${mdiPlus}></ha-svg-icon>
+          <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
         </mwc-fab>
       </hass-tabs-subpage>
     `;
diff --git a/src/panels/config/integrations/ha-integration-card.ts b/src/panels/config/integrations/ha-integration-card.ts
index a1625c7c2c..e52b318d82 100644
--- a/src/panels/config/integrations/ha-integration-card.ts
+++ b/src/panels/config/integrations/ha-integration-card.ts
@@ -249,7 +249,7 @@ export class HaIntegrationCard extends LitElement {
               .label=${this.hass.localize("ui.common.overflow_menu")}
               slot="trigger"
             >
-              <ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
+              <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
             </mwc-icon-button>
             <mwc-list-item @request-selected="${this._handleSystemOptions}">
               ${this.hass.localize(
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts b/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts
index a0d8ff6be4..32db5e38d7 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts
@@ -87,7 +87,7 @@ class ZHAConfigDashboard extends LitElement {
             title=${this.hass.localize("ui.panel.config.zha.add_device")}
             ?rtl=${computeRTL(this.hass)}
           >
-            <ha-svg-icon slot="icon" path=${mdiPlus}></ha-svg-icon>
+            <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
           </mwc-fab>
         </a>
       </hass-tabs-subpage>
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts b/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts
index 566a8207ad..87fba52273 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts
@@ -129,7 +129,7 @@ export class ZHAGroupsDashboard extends LitElement {
           <mwc-fab
             title=${this.hass!.localize("ui.panel.config.zha.groups.add_group")}
           >
-            <ha-svg-icon slot="icon" path=${mdiPlus}></ha-svg-icon>
+            <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
           </mwc-fab>
         </a>
       </hass-tabs-subpage-data-table>
diff --git a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
index 90205aa8a7..280504288f 100644
--- a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
+++ b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
@@ -229,7 +229,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
           )}"
           @click=${this._addDashboard}
         >
-          <ha-svg-icon slot="icon" path=${mdiPlus}></ha-svg-icon>
+          <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
         </mwc-fab>
       </hass-tabs-subpage-data-table>
     `;
diff --git a/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts b/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts
index 5d35134956..bfca42864e 100644
--- a/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts
+++ b/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts
@@ -109,7 +109,7 @@ export class HaConfigLovelaceRescources extends LitElement {
           )}
           @click=${this._addResource}
         >
-          <ha-svg-icon slot="icon" path=${mdiPlus}></ha-svg-icon>
+          <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
         </mwc-fab>
       </hass-tabs-subpage-data-table>
     `;
diff --git a/src/panels/config/person/ha-config-person.ts b/src/panels/config/person/ha-config-person.ts
index 829b12278a..fab157fe0b 100644
--- a/src/panels/config/person/ha-config-person.ts
+++ b/src/panels/config/person/ha-config-person.ts
@@ -136,7 +136,7 @@ class HaConfigPerson extends LitElement {
           title="${hass.localize("ui.panel.config.person.add_person")}"
           @click=${this._createPerson}
         >
-          <ha-svg-icon slot="icon" path=${mdiPlus}></ha-svg-icon>
+          <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
         </mwc-fab>
       </hass-tabs-subpage>
     `;
diff --git a/src/panels/config/scene/ha-scene-dashboard.ts b/src/panels/config/scene/ha-scene-dashboard.ts
index fcea68d01a..d9b81bb317 100644
--- a/src/panels/config/scene/ha-scene-dashboard.ts
+++ b/src/panels/config/scene/ha-scene-dashboard.ts
@@ -158,7 +158,7 @@ class HaSceneDashboard extends LitElement {
               "ui.panel.config.scene.picker.add_scene"
             )}
           >
-            <ha-svg-icon slot="icon" path=${mdiPlus}></ha-svg-icon>
+            <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
           </mwc-fab>
         </a>
       </hass-tabs-subpage-data-table>
diff --git a/src/panels/config/scene/ha-scene-editor.ts b/src/panels/config/scene/ha-scene-editor.ts
index 73f0e29ce3..899fdedbab 100644
--- a/src/panels/config/scene/ha-scene-editor.ts
+++ b/src/panels/config/scene/ha-scene-editor.ts
@@ -405,7 +405,7 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) {
           @click=${this._saveScene}
           class=${classMap({ dirty: this._dirty })}
         >
-          <ha-svg-icon slot="icon" path=${mdiContentSave}></ha-svg-icon>
+          <ha-svg-icon slot="icon" .path=${mdiContentSave}></ha-svg-icon>
         </mwc-fab>
       </hass-tabs-subpage>
     `;
diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts
index 6d248bac05..87b2635a73 100644
--- a/src/panels/config/script/ha-script-editor.ts
+++ b/src/panels/config/script/ha-script-editor.ts
@@ -260,7 +260,7 @@ export class HaScriptEditor extends LitElement {
             dirty: this._dirty,
           })}
         >
-          <ha-svg-icon slot="icon" path=${mdiContentSave}></ha-svg-icon>
+          <ha-svg-icon slot="icon" .path=${mdiContentSave}></ha-svg-icon>
         </mwc-fab>
       </hass-tabs-subpage>
     `;
diff --git a/src/panels/config/script/ha-script-picker.ts b/src/panels/config/script/ha-script-picker.ts
index d7b713596c..66fbe717b6 100644
--- a/src/panels/config/script/ha-script-picker.ts
+++ b/src/panels/config/script/ha-script-picker.ts
@@ -155,7 +155,7 @@ class HaScriptPicker extends LitElement {
             )}"
             ?rtl=${computeRTL(this.hass)}
           >
-            <ha-svg-icon slot="icon" path=${mdiPlus}></ha-svg-icon>
+            <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
           </mwc-fab>
         </a>
       </hass-tabs-subpage-data-table>
diff --git a/src/panels/config/tags/ha-config-tags.ts b/src/panels/config/tags/ha-config-tags.ts
index a0dd7e32b8..a3566f83f8 100644
--- a/src/panels/config/tags/ha-config-tags.ts
+++ b/src/panels/config/tags/ha-config-tags.ts
@@ -198,7 +198,7 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
           title=${this.hass.localize("ui.panel.config.tags.add_tag")}
           @click=${this._addTag}
         >
-          <ha-svg-icon slot="icon" path=${mdiPlus}></ha-svg-icon>
+          <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
         </mwc-fab>
       </hass-tabs-subpage-data-table>
     `;
diff --git a/src/panels/config/users/ha-config-users.ts b/src/panels/config/users/ha-config-users.ts
index 30ed2e8093..05d2b8368e 100644
--- a/src/panels/config/users/ha-config-users.ts
+++ b/src/panels/config/users/ha-config-users.ts
@@ -102,7 +102,7 @@ export class HaConfigUsers extends LitElement {
           .title=${this.hass.localize("ui.panel.config.users.picker.add_user")}
           @click=${this._addUser}
         >
-          <ha-svg-icon slot="icon" path=${mdiPlus}></ha-svg-icon>
+          <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
         </mwc-fab>
       </hass-tabs-subpage-data-table>
     `;
diff --git a/src/panels/config/zone/ha-config-zone.ts b/src/panels/config/zone/ha-config-zone.ts
index 83910d3c15..6f4f277ab6 100644
--- a/src/panels/config/zone/ha-config-zone.ts
+++ b/src/panels/config/zone/ha-config-zone.ts
@@ -260,7 +260,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
           title=${hass.localize("ui.panel.config.zone.add_zone")}
           @click=${this._createZone}
         >
-          <ha-svg-icon slot="icon" path=${mdiPlus}></ha-svg-icon>
+          <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
         </mwc-fab>
       </hass-tabs-subpage>
     `;
diff --git a/src/panels/logbook/ha-panel-logbook.ts b/src/panels/logbook/ha-panel-logbook.ts
index e3542ba572..0ac80b1cd9 100644
--- a/src/panels/logbook/ha-panel-logbook.ts
+++ b/src/panels/logbook/ha-panel-logbook.ts
@@ -86,7 +86,7 @@ export class HaPanelLogbook extends LitElement {
               @click=${this._refreshLogbook}
               .disabled=${this._isLoading}
             >
-              <ha-svg-icon path=${mdiRefresh}></ha-svg-icon>
+              <ha-svg-icon .path=${mdiRefresh}></ha-svg-icon>
             </mwc-icon-button>
           </app-toolbar>
         </app-header>
diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts
index 4e6d5ddb3d..a74acde408 100644
--- a/src/panels/lovelace/components/hui-card-options.ts
+++ b/src/panels/lovelace/components/hui-card-options.ts
@@ -58,14 +58,14 @@ export class HuiCardOptions extends LitElement {
                 .length ===
               this.path![1] + 1}
             >
-              <ha-svg-icon path=${mdiArrowDown}></ha-svg-icon>
+              <ha-svg-icon .path=${mdiArrowDown}></ha-svg-icon>
             </mwc-icon-button>
             <mwc-icon-button
               title="Move card up"
               class="move-arrow"
               @click=${this._cardUp}
               ?disabled=${this.path![1] === 0}
-              ><ha-svg-icon path=${mdiArrowUp}></ha-svg-icon
+              ><ha-svg-icon .path=${mdiArrowUp}></ha-svg-icon
             ></mwc-icon-button>
             <ha-button-menu corner="BOTTOM_START" @action=${this._handleAction}>
               <mwc-icon-button
@@ -77,7 +77,7 @@ export class HuiCardOptions extends LitElement {
                   "ui.panel.lovelace.editor.edit_card.options"
                 )}"
               >
-                <ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
+                <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
               </mwc-icon-button>
 
               <mwc-list-item>
diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
index aa45460df6..5b2681eb0b 100755
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
@@ -174,7 +174,7 @@ export class HuiDialogEditCard extends LitElement implements HassDialog {
                     dir=${computeRTLDirection(this.hass)}
                   >
                     <mwc-icon-button>
-                      <ha-svg-icon path=${mdiHelpCircle}></ha-svg-icon>
+                      <ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
                     </mwc-icon-button>
                   </a>
                 `
diff --git a/src/panels/lovelace/editor/hui-dialog-save-config.ts b/src/panels/lovelace/editor/hui-dialog-save-config.ts
index 3fd5997ffa..b1a4c760f4 100644
--- a/src/panels/lovelace/editor/hui-dialog-save-config.ts
+++ b/src/panels/lovelace/editor/hui-dialog-save-config.ts
@@ -74,7 +74,7 @@ export class HuiSaveConfig extends LitElement implements HassDialog {
             dir=${computeRTLDirection(this.hass!)}
           >
             <mwc-icon-button>
-              <ha-svg-icon path=${mdiHelpCircle}></ha-svg-icon>
+              <ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
             </mwc-icon-button>
           </a>`}
       >
diff --git a/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts b/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts
index 1e81f187a5..f5728d7627 100644
--- a/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts
+++ b/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts
@@ -112,7 +112,7 @@ export class HuiUnusedEntities extends LitElement {
           .label=${this.hass.localize("ui.panel.lovelace.editor.edit_card.add")}
           @click=${this._addToLovelaceView}
         >
-          <ha-svg-icon slot="icon" path=${mdiPlus}></ha-svg-icon>
+          <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
         </mwc-fab>
       </div>
     `;
diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index a0f0a6dfa3..5aa182e9ca 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -115,7 +115,7 @@ class HUIRoot extends LitElement {
                     )}"
                     @click="${this._editModeDisable}"
                   >
-                    <ha-svg-icon path=${mdiClose}></ha-svg-icon>
+                    <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
                   </mwc-icon-button>
                   <div main-title>
                     ${this.config.title ||
@@ -130,7 +130,7 @@ class HUIRoot extends LitElement {
                       class="edit-icon"
                       @click="${this._editLovelace}"
                     >
-                      <ha-svg-icon path=${mdiPencil}></ha-svg-icon>
+                      <ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
                     </mwc-icon-button>
                   </div>
                   <a
@@ -144,7 +144,7 @@ class HUIRoot extends LitElement {
                         "ui.panel.lovelace.menu.help"
                       )}"
                     >
-                      <ha-svg-icon path=${mdiHelpCircle}></ha-svg-icon>
+                      <ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
                     </mwc-icon-button>
                   </a>
                   <ha-button-menu corner="BOTTOM_START">
@@ -157,7 +157,7 @@ class HUIRoot extends LitElement {
                         "ui.panel.lovelace.editor.menu.open"
                       )}
                     >
-                      <ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
+                      <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
                     </mwc-icon-button>
                     ${__DEMO__ /* No unused entities available in the demo */
                       ? ""
@@ -194,7 +194,7 @@ class HUIRoot extends LitElement {
                           label="Start conversation"
                           @click=${this._showVoiceCommandDialog}
                         >
-                          <ha-svg-icon path=${mdiMicrophone}></ha-svg-icon>
+                          <ha-svg-icon .path=${mdiMicrophone}></ha-svg-icon>
                         </mwc-icon-button>
                       `
                     : ""}
@@ -208,7 +208,7 @@ class HUIRoot extends LitElement {
                         "ui.panel.lovelace.editor.menu.open"
                       )}"
                     >
-                      <ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
+                      <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
                     </mwc-icon-button>
                     ${this._yamlMode
                       ? html`
@@ -332,7 +332,7 @@ class HUIRoot extends LitElement {
                                     "ui.panel.lovelace.editor.edit_view.edit"
                                   )}"
                                   class="edit-icon view"
-                                  path=${mdiPencil}
+                                  .path=${mdiPencil}
                                   @click="${this._editView}"
                                 ></ha-svg-icon>
                                 <ha-icon-button-arrow-next
@@ -359,7 +359,7 @@ class HUIRoot extends LitElement {
                               "ui.panel.lovelace.editor.edit_view.add"
                             )}"
                           >
-                            <ha-svg-icon path=${mdiPlus}></ha-svg-icon>
+                            <ha-svg-icon .path=${mdiPlus}></ha-svg-icon>
                           </mwc-icon-button>
                         `
                       : ""}
diff --git a/src/panels/lovelace/views/hui-masonry-view.ts b/src/panels/lovelace/views/hui-masonry-view.ts
index fb3290fff7..2f0f3320b7 100644
--- a/src/panels/lovelace/views/hui-masonry-view.ts
+++ b/src/panels/lovelace/views/hui-masonry-view.ts
@@ -90,7 +90,7 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
                 rtl: computeRTL(this.hass!),
               })}
             >
-              <ha-svg-icon slot="icon" path=${mdiPlus}></ha-svg-icon>
+              <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
             </mwc-fab>
           `
         : ""}
diff --git a/src/panels/lovelace/views/hui-panel-view.ts b/src/panels/lovelace/views/hui-panel-view.ts
index e1488f0996..2a5fac507b 100644
--- a/src/panels/lovelace/views/hui-panel-view.ts
+++ b/src/panels/lovelace/views/hui-panel-view.ts
@@ -82,7 +82,7 @@ export class PanelView extends LitElement implements LovelaceViewElement {
                 rtl: computeRTL(this.hass!),
               })}
             >
-              <ha-svg-icon slot="icon" path=${mdiPlus}></ha-svg-icon>
+              <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
             </mwc-fab>
           `
         : ""}