Some fixes for icons (#5758)

.gitignore

@@ -5,7 +5,6 @@ npm-debug.log
 .DS_Store
 hass_frontend/*
 .reify-cache
-demo/hademo-icons.html
 
 # Python stuff
 *.py[cod]

.prettierignore

@@ -3,7 +3,6 @@ build-translations/*
 translations/*
 node_modules/*
 hass_frontend/*
-demo/hademo-icons.html
 pip-selfcheck.json
 
 # vscode

build-scripts/gulp/gen-icons-json.js

@@ -8,6 +8,7 @@ const ICON_PACKAGE_PATH = path.resolve(
   "../../node_modules/@mdi/svg/"
 );
 const META_PATH = path.resolve(ICON_PACKAGE_PATH, "meta.json");
+const PACKAGE_PATH = path.resolve(ICON_PACKAGE_PATH, "package.json");
 const ICON_PATH = path.resolve(ICON_PACKAGE_PATH, "svg");
 const OUTPUT_DIR = path.resolve(__dirname, "../../build/mdi");
 
@@ -26,7 +27,7 @@ const getMeta = () => {
 
 const splitBySize = (meta) => {
   const chunks = [];
-  const CHUNK_SIZE = 100000;
+  const CHUNK_SIZE = 50000;
 
   let curSize = 0;
   let startKey;
@@ -64,8 +65,7 @@ const findDifferentiator = (curString, prevString) => {
       return curString.substring(0, i + 1);
     }
   }
-  console.error("Cannot find differentiator", curString, prevString);
+  throw new Error("Cannot find differentiator", curString, prevString);
-  return undefined;
 };
 
 gulp.task("gen-icons-json", (done) => {
@@ -75,7 +75,7 @@ gulp.task("gen-icons-json", (done) => {
   if (!fs.existsSync(OUTPUT_DIR)) {
     fs.mkdirSync(OUTPUT_DIR, { recursive: true });
   }
-  const manifest = [];
+  const parts = [];
 
   let lastEnd;
   split.forEach((chunk) => {
@@ -93,16 +93,19 @@ gulp.task("gen-icons-json", (done) => {
       output[icon.name] = icon.path;
     });
     const filename = hash(output);
-    manifest.push({ start: startKey, file: filename });
+    parts.push({ start: startKey, file: filename });
     fs.writeFileSync(
       path.resolve(OUTPUT_DIR, `${filename}.json`),
       JSON.stringify(output)
     );
   });
 
+  const file = fs.readFileSync(PACKAGE_PATH, { encoding });
+  const package = JSON.parse(file);
+
   fs.writeFileSync(
     path.resolve(OUTPUT_DIR, "iconMetadata.json"),
-    JSON.stringify(manifest)
+    JSON.stringify({ version: package.version, parts })
   );
 
   done();

src/components/ha-icon-button.ts

@@ -18,6 +18,10 @@ export class HaIconButton extends LitElement {
 
   @property({ type: String }) label = "";
 
+  protected createRenderRoot() {
+    return this.attachShadow({ mode: "open", delegatesFocus: true });
+  }
+
   protected render(): TemplateResult {
     return html`
       <mwc-icon-button
@@ -40,6 +44,10 @@ export class HaIconButton extends LitElement {
     return css`
       :host {
         display: inline-block;
+        outline: none;
+      }
+      mwc-icon-button {
+        --mdc-theme-on-primary: currentColor;
       }
       ha-icon {
         display: inline-flex;

src/components/ha-icon.ts

@@ -1,5 +1,5 @@
 import "@polymer/iron-icon/iron-icon";
-import { get, Store } from "idb-keyval";
+import { get, set, clear, Store } from "idb-keyval";
 import {
   customElement,
   LitElement,
@@ -13,7 +13,7 @@ import {
 import "./ha-svg-icon";
 import { debounce } from "../common/util/debounce";
 import { iconMetadata } from "../resources/icon-metadata";
-import { IconMetadata } from "../types";
+import { IconMeta } from "../types";
 
 interface Icons {
   [key: string]: string;
@@ -24,12 +24,23 @@ interface Chunks {
 }
 
 const iconStore = new Store("hass-icon-db", "mdi-icon-store");
+
+get("_version", iconStore).then((version) => {
+  if (!version) {
+    set("_version", iconMetadata.version, iconStore);
+  } else if (version !== iconMetadata.version) {
+    clear(iconStore).then(() =>
+      set("_version", iconMetadata.version, iconStore)
+    );
+  }
+});
+
 const chunks: Chunks = {};
-const MDI_PREFIXES = ["mdi", "hass", "hassio"];
+const MDI_PREFIXES = ["mdi", "hass", "hassio", "hademo"];
 
 const findIconChunk = (icon): string => {
-  let lastChunk: IconMetadata;
+  let lastChunk: IconMeta;
-  for (const chunk of iconMetadata) {
+  for (const chunk of iconMetadata.parts) {
     if (chunk.start !== undefined && icon < chunk.start) {
       break;
     }

src/components/ha-sidebar.ts

@@ -482,7 +482,7 @@ class HaSidebar extends LitElement {
         box-sizing: border-box;
         height: 65px;
         display: flex;
-        padding: 0 12px;
+        padding: 0 8.5px;
         border-bottom: 1px solid transparent;
         white-space: nowrap;
         font-weight: 400;

src/resources/icon-metadata.ts

@@ -1,4 +1,4 @@
 import * as iconMetadata_ from "../../build/mdi/iconMetadata.json";
-import { IconMetadata } from "../types.js";
+import { IconMetaFile } from "../types.js";
 
-export const iconMetadata = (iconMetadata_ as any).default as IconMetadata[];
+export const iconMetadata = (iconMetadata_ as any).default as IconMetaFile;

src/types.ts

@@ -109,7 +109,12 @@ export interface TranslationMetadata {
   };
 }
 
-export interface IconMetadata {
+export interface IconMetaFile {
+  version: string;
+  parts: IconMeta[];
+}
+
+export interface IconMeta {
   start: string;
   file: string;
 }