Dynamic mdi icons

iconsets/rollup-iconsets.js

@@ -4,4 +4,3 @@ import "./font-awesome/font-awesome.css";
 import "./foundation/foundation-icons.css";
 import "./icomoon/icomoon.css";
 import "./devicon/devicon.css";
-import "./mdi/materialdesignicons.css";

lib/items/tool-bar-button-view.js

@@ -1,6 +1,32 @@
 import {CompositeDisposable} from 'atom';
 import { ToolBarItem } from './tool-bar-item';
 
+function capitalize(part) {
+  return part.charAt(0).toUpperCase() + part.slice(1);
+}
+function mdiIconName(str) {
+  return "mdi" + str.split('-').map((p)=>capitalize(p)).join('')
+}
+
+let mdi; // mdi iconSet
+async function createMDIIcon(iconName) {
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute('width','auto');
+  svg.setAttribute('height','auto');
+  svg.classList.add('tool-bar-btn')
+  const path = document.createElementNS("http://www.w3.org/2000/svg", "path")
+  if (!mdi) {
+    mdi = await import('@mdi/js')
+  }
+  // svg.innerHTML= `
+  //   <path d=${mdi[mdiIconName(this.options.icon)]} />
+  // `
+  path.setAttribute('d',mdi[mdiIconName(iconName)]);
+  svg.appendChild(path)
+  return svg
+}
+
+
 /**
  * A button class with many options
  *
@@ -58,14 +84,17 @@ export class ToolBarButtonView extends ToolBarItem {
   }
 
   /** Add an icon for the button using built-in icons. */
-  addIcon () {
+  async addIcon () {
     if (!this.options.icon) {
       return;
     }
 
     if (this.options.iconset) {
       if (this.options.iconset.startsWith('fa')) {
         this.classNames.push(this.options.iconset, `fa-${this.options.icon}`);
+      }
+      else if (this.options.iconset.startsWith('mdi')) {
+        createMDIIcon(this.options.icon).then((svg) => {this.element.appendChild(svg);})
       } else {
         this.classNames.push(this.options.iconset, `${this.options.iconset}-${this.options.icon}`);
       }

package.json

@@ -23,6 +23,9 @@
     "build-commit": "build-commit -o dist",
     "prepare": "npm run build"
   },
+  "dependencies": {
+    "@mdi/js": "latest"
+  },
   "devDependencies": {
     "@types/atom": "latest",
     "eslint": "^6.8.0",