Use svg icons for default panels (#10342)

src/components/ha-sidebar.ts

@@ -1,11 +1,21 @@
 import "@material/mwc-button/mwc-button";
 import {
   mdiBell,
+  mdiCalendar,
+  mdiCart,
   mdiCellphoneCog,
+  mdiChartBox,
   mdiClose,
+  mdiCog,
+  mdiFormatListBulletedType,
+  mdiHammer,
+  mdiHomeAssistant,
+  mdiLightningBolt,
   mdiMenu,
   mdiMenuOpen,
+  mdiPlayBoxMultiple,
   mdiPlus,
+  mdiTooltipAccount,
   mdiViewDashboard,
 } from "@mdi/js";
 import "@polymer/paper-item/paper-icon-item";
@@ -62,6 +72,20 @@ const SORT_VALUE_URL_PATHS = {
   config: 11,
 };
 
+const PANEL_ICONS = {
+  calendar: mdiCalendar,
+  config: mdiCog,
+  "developer-tools": mdiHammer,
+  energy: mdiLightningBolt,
+  hassio: mdiHomeAssistant,
+  history: mdiChartBox,
+  logbook: mdiFormatListBulletedType,
+  lovelace: mdiViewDashboard,
+  map: mdiTooltipAccount,
+  "media-browser": mdiPlayBoxMultiple,
+  "shopping-list": mdiCart,
+};
+
 const panelSorter = (
   reverseSort: string[],
   defaultPanel: string,
@@ -348,6 +372,60 @@ class HaSidebar extends LitElement {
     `;
   }
 
+  private _renderPanels(panels: PanelInfo[]) {
+    return panels.map((panel) =>
+      this._renderPanel(
+        panel.url_path,
+        panel.url_path === this.hass.defaultPanel
+          ? panel.title || this.hass.localize("panel.states")
+          : this.hass.localize(`panel.${panel.title}`) || panel.title,
+        panel.icon,
+        panel.url_path === this.hass.defaultPanel && !panel.icon
+          ? PANEL_ICONS.lovelace
+          : panel.url_path in PANEL_ICONS
+          ? PANEL_ICONS[panel.url_path]
+          : undefined
+      )
+    );
+  }
+
+  private _renderPanel(
+    urlPath: string,
+    title: string | null,
+    icon?: string | null,
+    iconPath?: string | null
+  ) {
+    return html`
+      <a
+        aria-role="option"
+        href=${`/${urlPath}`}
+        data-panel=${urlPath}
+        tabindex="-1"
+        @mouseenter=${this._itemMouseEnter}
+        @mouseleave=${this._itemMouseLeave}
+      >
+        <paper-icon-item>
+          ${iconPath
+            ? html`<ha-svg-icon
+                slot="item-icon"
+                .path=${iconPath}
+              ></ha-svg-icon>`
+            : html`<ha-icon slot="item-icon" .icon=${icon}></ha-icon>`}
+          <span class="item-text">${title}</span>
+        </paper-icon-item>
+        ${this.editMode
+          ? html`<ha-icon-button
+              .label=${this.hass.localize("ui.sidebar.hide_panel")}
+              .path=${mdiClose}
+              class="hide-panel"
+              .panel=${urlPath}
+              @click=${this._hidePanel}
+            ></ha-icon-button>`
+          : ""}
+      </a>
+    `;
+  }
+
   private _renderPanelsEdit(beforeSpacer: PanelInfo[]) {
     // prettier-ignore
     return html`<div id="sortable">
@@ -360,7 +438,7 @@ class HaSidebar extends LitElement {
   }
 
   private _renderHiddenPanels() {
-    return html` ${this._hiddenPanels.length
+    return html`${this._hiddenPanels.length
       ? html`${this._hiddenPanels.map((url) => {
           const panel = this.hass.panels[url];
           if (!panel) {
@@ -371,12 +449,17 @@ class HaSidebar extends LitElement {
             class="hidden-panel"
             .panel=${url}
           >
-            <ha-icon
-              slot="item-icon"
-              .icon=${panel.url_path === this.hass.defaultPanel
-                ? "mdi:view-dashboard"
-                : panel.icon}
-            ></ha-icon>
+            ${panel.url_path === this.hass.defaultPanel && !panel.icon
+              ? html`<ha-svg-icon
+                  slot="item-icon"
+                  .path=${PANEL_ICONS.lovelace}
+                ></ha-svg-icon>`
+              : panel.url_path in PANEL_ICONS
+              ? html`<ha-svg-icon
+                  slot="item-icon"
+                  .path=${PANEL_ICONS[panel.url_path]}
+                ></ha-svg-icon>`
+              : html`<ha-icon slot="item-icon" .icon=${panel.icon}></ha-icon>`}
             <span class="item-text"
               >${panel.url_path === this.hass.defaultPanel
                 ? this.hass.localize("panel.states")
@@ -412,7 +495,7 @@ class HaSidebar extends LitElement {
       }
     }
 
-    return html` <div
+    return html`<div
       class="notifications-container"
       @mouseenter=${this._itemMouseEnter}
       @mouseleave=${this._itemMouseLeave}
@@ -682,58 +765,6 @@ class HaSidebar extends LitElement {
     fireEvent(this, "hass-toggle-menu");
   }
 
-  private _renderPanels(panels: PanelInfo[]) {
-    return panels.map((panel) =>
-      this._renderPanel(
-        panel.url_path,
-        panel.url_path === this.hass.defaultPanel
-          ? panel.title || this.hass.localize("panel.states")
-          : this.hass.localize(`panel.${panel.title}`) || panel.title,
-        panel.icon,
-        panel.url_path === this.hass.defaultPanel && !panel.icon
-          ? mdiViewDashboard
-          : undefined
-      )
-    );
-  }
-
-  private _renderPanel(
-    urlPath: string,
-    title: string | null,
-    icon?: string | null,
-    iconPath?: string | null
-  ) {
-    return html`
-      <a
-        aria-role="option"
-        href=${`/${urlPath}`}
-        data-panel=${urlPath}
-        tabindex="-1"
-        @mouseenter=${this._itemMouseEnter}
-        @mouseleave=${this._itemMouseLeave}
-      >
-        <paper-icon-item>
-          ${iconPath
-            ? html`<ha-svg-icon
-                slot="item-icon"
-                .path=${iconPath}
-              ></ha-svg-icon>`
-            : html`<ha-icon slot="item-icon" .icon=${icon}></ha-icon>`}
-          <span class="item-text">${title}</span>
-        </paper-icon-item>
-        ${this.editMode
-          ? html`<ha-icon-button
-              .label=${this.hass.localize("ui.sidebar.hide_panel")}
-              .path=${mdiClose}
-              class="hide-panel"
-              .panel=${urlPath}
-              @click=${this._hidePanel}
-            ></ha-icon-button>`
-          : ""}
-      </a>
-    `;
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,