use material ui icons instead of fontello, do not import google font

package-lock.json

@@ -1590,7 +1590,6 @@
       "version": "7.8.7",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.7.tgz",
       "integrity": "sha512-+AATMUFppJDw6aiR5NVPHqIQBlV/Pj8wY/EZH+lmvRdUo9xBaz/rF3alAwFJQavvKfeOlPE7oaaDHVbcySbCsg==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
@@ -1675,6 +1674,11 @@
         }
       }
     },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
     "@endemolshinegroup/cosmiconfig-typescript-loader": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@endemolshinegroup/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-1.0.1.tgz",
@@ -2776,6 +2780,81 @@
         }
       }
     },
+    "@material-ui/core": {
+      "version": "4.9.10",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.9.10.tgz",
+      "integrity": "sha512-CQuZU9Y10RkwSdxjn785kw2EPcXhv5GKauuVQufR9LlD37kjfn21Im1yvr6wsUzn81oLhEvVPz727UWC0gbqxg==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/styles": "^4.9.10",
+        "@material-ui/system": "^4.9.10",
+        "@material-ui/types": "^5.0.1",
+        "@material-ui/utils": "^4.9.6",
+        "@types/react-transition-group": "^4.2.0",
+        "clsx": "^1.0.4",
+        "hoist-non-react-statics": "^3.3.2",
+        "popper.js": "^1.16.1-lts",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0",
+        "react-transition-group": "^4.3.0"
+      }
+    },
+    "@material-ui/icons": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.9.1.tgz",
+      "integrity": "sha512-GBitL3oBWO0hzBhvA9KxqcowRUsA0qzwKkURyC8nppnC3fw54KPKZ+d4V1Eeg/UnDRSzDaI9nGCdel/eh9AQMg==",
+      "requires": {
+        "@babel/runtime": "^7.4.4"
+      }
+    },
+    "@material-ui/styles": {
+      "version": "4.9.10",
+      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.9.10.tgz",
+      "integrity": "sha512-EXIXlqVyFDnjXF6tj72y6ZxiSy+mHtrsCo3Srkm3XUeu3Z01aftDBy7ZSr3TQ02gXHTvDSBvegp3Le6p/tl7eA==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@emotion/hash": "^0.8.0",
+        "@material-ui/types": "^5.0.1",
+        "@material-ui/utils": "^4.9.6",
+        "clsx": "^1.0.2",
+        "csstype": "^2.5.2",
+        "hoist-non-react-statics": "^3.3.2",
+        "jss": "^10.0.3",
+        "jss-plugin-camel-case": "^10.0.3",
+        "jss-plugin-default-unit": "^10.0.3",
+        "jss-plugin-global": "^10.0.3",
+        "jss-plugin-nested": "^10.0.3",
+        "jss-plugin-props-sort": "^10.0.3",
+        "jss-plugin-rule-value-function": "^10.0.3",
+        "jss-plugin-vendor-prefixer": "^10.0.3",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@material-ui/system": {
+      "version": "4.9.10",
+      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.9.10.tgz",
+      "integrity": "sha512-E+t0baX2TBZk6ALm8twG6objpsxLdMM4MDm1++LMt2m7CetCAEc3aIAfDaprk4+tm5hFT1Cah5dRWk8EeIFQYw==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.9.6",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@material-ui/types": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.0.1.tgz",
+      "integrity": "sha512-wURPSY7/3+MAtng3i26g+WKwwNE3HEeqa/trDBR5+zWKmcjO+u9t7Npu/J1r+3dmIa/OeziN9D/18IrBKvKffw=="
+    },
+    "@material-ui/utils": {
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.9.6.tgz",
+      "integrity": "sha512-gqlBn0JPPTUZeAktn1rgMcy9Iczrr74ecx31tyZLVGdBGGzsxzM6PP6zeS7FuoLS6vG4hoZP7hWnOoHtkR0Kvw==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0"
+      }
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -3079,6 +3158,14 @@
         "@types/react": "*"
       }
     },
+    "@types/react-transition-group": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.2.4.tgz",
+      "integrity": "sha512-8DMUaDqh0S70TjkqU0DxOu80tFUiiaS9rxkWip/nb7gtvAsbqOXm02UCmR8zdcjWujgeYPiPNTVpVpKzUDotwA==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/serve-static": {
       "version": "1.13.3",
       "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.3.tgz",
@@ -4220,7 +4307,8 @@
         },
         "kind-of": {
           "version": "6.0.2",
-          "resolved": "",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
+          "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==",
           "dev": true
         }
       }
@@ -4363,7 +4451,7 @@
     },
     "browserify-aes": {
       "version": "1.2.0",
-      "resolved": "http://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
       "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
       "dev": true,
       "requires": {
@@ -4400,7 +4488,7 @@
     },
     "browserify-rsa": {
       "version": "4.0.1",
-      "resolved": "http://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
       "integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=",
       "dev": true,
       "requires": {
@@ -4911,6 +4999,11 @@
         }
       }
     },
+    "clsx": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.0.tgz",
+      "integrity": "sha512-3avwM37fSK5oP6M5rQ9CNe99lwxhXDOeSWVPAOYF6OazUTgZCMb0yWlJpmdD74REy1gkEaFiub2ULv4fq9GUhA=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -5330,7 +5423,7 @@
     },
     "create-hash": {
       "version": "1.2.0",
-      "resolved": "http://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
       "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==",
       "dev": true,
       "requires": {
@@ -5343,7 +5436,7 @@
     },
     "create-hmac": {
       "version": "1.1.7",
-      "resolved": "http://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
+      "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
       "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
       "dev": true,
       "requires": {
@@ -5445,6 +5538,15 @@
         }
       }
     },
+    "css-vendor": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
+      "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
+      "requires": {
+        "@babel/runtime": "^7.8.3",
+        "is-in-browser": "^1.0.2"
+      }
+    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -5710,7 +5812,7 @@
     },
     "diffie-hellman": {
       "version": "5.0.3",
-      "resolved": "http://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
       "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
       "dev": true,
       "requires": {
@@ -5745,6 +5847,15 @@
         "esutils": "^2.0.2"
       }
     },
+    "dom-helpers": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.4.tgz",
+      "integrity": "sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^2.6.7"
+      }
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -7891,6 +8002,14 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
     "homedir-polyfill": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
@@ -8033,6 +8152,11 @@
       "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
       "dev": true
     },
+    "hyphenate-style-name": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz",
+      "integrity": "sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ=="
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -8434,6 +8558,11 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
+    },
     "is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -10411,6 +10540,83 @@
         "verror": "1.10.0"
       }
     },
+    "jss": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-10.1.1.tgz",
+      "integrity": "sha512-Xz3qgRUFlxbWk1czCZibUJqhVPObrZHxY3FPsjCXhDld4NOj1BgM14Ir5hVm+Qr6OLqVljjGvoMcCdXNOAbdkQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "csstype": "^2.6.5",
+        "is-in-browser": "^1.1.3",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-camel-case": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.1.1.tgz",
+      "integrity": "sha512-MDIaw8FeD5uFz1seQBKz4pnvDLnj5vIKV5hXSVdMaAVq13xR6SVTVWkIV/keyTs5txxTvzGJ9hXoxgd1WTUlBw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "hyphenate-style-name": "^1.0.3",
+        "jss": "10.1.1"
+      }
+    },
+    "jss-plugin-default-unit": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.1.1.tgz",
+      "integrity": "sha512-UkeVCA/b3QEA4k0nIKS4uWXDCNmV73WLHdh2oDGZZc3GsQtlOCuiH3EkB/qI60v2MiCq356/SYWsDXt21yjwdg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.1.1"
+      }
+    },
+    "jss-plugin-global": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.1.1.tgz",
+      "integrity": "sha512-VBG3wRyi3Z8S4kMhm8rZV6caYBegsk+QnQZSVmrWw6GVOT/Z4FA7eyMu5SdkorDlG/HVpHh91oFN56O4R9m2VA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.1.1"
+      }
+    },
+    "jss-plugin-nested": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.1.1.tgz",
+      "integrity": "sha512-ozEu7ZBSVrMYxSDplPX3H82XHNQk2DQEJ9TEyo7OVTPJ1hEieqjDFiOQOxXEj9z3PMqkylnUbvWIZRDKCFYw5Q==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.1.1",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-props-sort": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.1.1.tgz",
+      "integrity": "sha512-g/joK3eTDZB4pkqpZB38257yD4LXB0X15jxtZAGbUzcKAVUHPl9Jb47Y7lYmiGsShiV4YmQRqG1p2DHMYoK91g==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.1.1"
+      }
+    },
+    "jss-plugin-rule-value-function": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.1.1.tgz",
+      "integrity": "sha512-ClV1lvJ3laU9la1CUzaDugEcwnpjPTuJ0yGy2YtcU+gG/w9HMInD5vEv7xKAz53Bk4WiJm5uLOElSEshHyhKNw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.1.1"
+      }
+    },
+    "jss-plugin-vendor-prefixer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.1.1.tgz",
+      "integrity": "sha512-09MZpQ6onQrhaVSF6GHC4iYifQ7+4YC/tAP6D4ZWeZotvCMq1mHLqNKRIaqQ2lkgANjlEot2JnVi1ktu4+L4pw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "css-vendor": "^2.0.7",
+        "jss": "10.1.1"
+      }
+    },
     "jwa": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz",
@@ -12166,6 +12372,11 @@
       "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
       "dev": true
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
     "portfinder": {
       "version": "1.0.25",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.25.tgz",
@@ -12672,6 +12883,17 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz",
       "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q=="
     },
+    "react-transition-group": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz",
+      "integrity": "sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "read-pkg": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-4.0.1.tgz",
@@ -12882,8 +13104,7 @@
     "regenerator-runtime": {
       "version": "0.13.5",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
-      "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==",
-      "dev": true
+      "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA=="
     },
     "regex-not": {
       "version": "1.0.2",
@@ -13899,7 +14120,7 @@
     },
     "sha.js": {
       "version": "2.4.11",
-      "resolved": "http://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
+      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
       "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
       "dev": true,
       "requires": {
@@ -14101,7 +14322,8 @@
         },
         "kind-of": {
           "version": "6.0.2",
-          "resolved": "",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
+          "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==",
           "dev": true
         }
       }
@@ -14730,6 +14952,11 @@
         "setimmediate": "^1.0.4"
       }
     },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -15517,7 +15744,8 @@
             "ansi-regex": {
               "version": "2.1.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -15726,7 +15954,8 @@
             "minimist": {
               "version": "1.2.5",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "minipass": {
               "version": "2.9.0",
@@ -15751,6 +15980,7 @@
               "version": "0.5.3",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "minimist": "^1.2.5"
               }
@@ -15812,7 +16042,8 @@
             "npm-normalize-package-bin": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "npm-packlist": {
               "version": "1.4.8",
@@ -15931,7 +16162,8 @@
             "safe-buffer": {
               "version": "5.1.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -15987,6 +16219,7 @@
               "version": "3.0.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -16030,12 +16263,14 @@
             "wrappy": {
               "version": "1.0.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.1.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             }
           }
         },

package.json

@@ -115,6 +115,8 @@
     "webpack-cli": "^3.3.11"
   },
   "dependencies": {
+    "@material-ui/core": "^4.9.10",
+    "@material-ui/icons": "^4.9.1",
     "@types/argparse": "^1.0.38",
     "@types/benchmark": "^1.0.31",
     "@types/compression": "1.7.0",

src/mol-plugin-ui/base.tsx

@@ -9,6 +9,7 @@ import * as React from 'react';
 import { Observable, Subscription } from 'rxjs';
 import { PluginContext } from '../mol-plugin/context';
 import { Button } from './controls/common';
+import { ArrowRight, ArrowDropDown } from '@material-ui/icons';
 
 export const PluginReactContext = React.createContext(void 0 as any as PluginContext);
 
@@ -101,7 +102,7 @@ export abstract class CollapsableControls<P = {}, S = {}, SS = {}> extends Plugi
 
         return <div className={wrapClass}>
             <div className='msp-transform-header'>
-                <Button icon={this.state.brand ? void 0 : this.state.isCollapsed ? 'expand' : 'collapse'} noOverflow onClick={this.toggleCollapsed}
+                <Button icon={this.state.brand ? void 0 : this.state.isCollapsed ? ArrowRight : ArrowDropDown} noOverflow onClick={this.toggleCollapsed}
                     className={this.state.brand ? `msp-transform-header-brand msp-transform-header-brand-${this.state.brand.accent}` : void 0} title={`Click to ${this.state.isCollapsed ? 'expand' : 'collapse'}`}>
                     {this.state.brand && <div className={`msp-accent-bg-${this.state.brand.accent}`}>{this.state.brand.name}</div>}
                     {this.state.header}

src/mol-plugin-ui/camera.tsx

@@ -4,18 +4,19 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { PluginCommands } from '../mol-plugin/commands';
+import { Code, Delete } from '@material-ui/icons';
 import * as React from 'react';
-import { PluginUIComponent } from './base';
+import { PluginCommands } from '../mol-plugin/commands';
 import { ParamDefinition as PD } from '../mol-util/param-definition';
-import { ParameterControls } from './controls/parameters';
-import { Icon } from './controls/icons';
+import { PluginUIComponent } from './base';
 import { Button, IconButton } from './controls/common';
+import { Icon } from './controls/icons';
+import { ParameterControls } from './controls/parameters';
 
 export class CameraSnapshots extends PluginUIComponent<{ }, { }> {
     render() {
         return <div>
-            <div className='msp-section-header'><Icon name='code' /> Camera Snapshots</div>
+            <div className='msp-section-header'><Icon svg={Code} /> Camera Snapshots</div>
             <CameraSnapshotControls />
             <CameraSnapshotList />
         </div>;
@@ -69,7 +70,7 @@ class CameraSnapshotList extends PluginUIComponent<{ }, { }> {
         return <ul style={{ listStyle: 'none' }} className='msp-state-list'>
             {this.plugin.state.cameraSnapshots.state.entries.valueSeq().map(e =><li key={e!.id}>
                 <Button onClick={this.apply(e!.id)}>{e!.name || e!.timestamp} <small>{e!.description}</small></Button>
-                <IconButton icon='remove' onClick={this.remove(e!.id)} className='msp-state-list-remove-button' />
+                <IconButton svg={Delete} onClick={this.remove(e!.id)} className='msp-state-list-remove-button' />
             </li>)}
         </ul>;
     }

src/mol-plugin-ui/controls.tsx

@@ -5,23 +5,24 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
+import { Build, NavigateBefore, NavigateNext, PlayArrow, SkipPrevious, Stop, Subscriptions } from '@material-ui/icons';
 import * as React from 'react';
-import { PluginCommands } from '../mol-plugin/commands';
 import { UpdateTrajectory } from '../mol-plugin-state/actions/structure';
-import { PluginUIComponent } from './base';
 import { LociLabel } from '../mol-plugin-state/manager/loci-label';
-import { IconButton } from './controls/common';
 import { PluginStateObject } from '../mol-plugin-state/objects';
 import { StateTransforms } from '../mol-plugin-state/transforms';
-import { StateTransformer } from '../mol-state';
 import { ModelFromTrajectory } from '../mol-plugin-state/transforms/model';
-import { AnimationControls } from './state/animation';
-import { StructureSelectionActionsControls } from './structure/selection';
+import { PluginCommands } from '../mol-plugin/commands';
+import { StateTransformer } from '../mol-state';
+import { PluginUIComponent } from './base';
+import { IconButton } from './controls/common';
 import { Icon } from './controls/icons';
+import { AnimationControls } from './state/animation';
 import { StructureComponentControls } from './structure/components';
+import { StructureMeasurementsControls } from './structure/measurements';
+import { StructureSelectionActionsControls } from './structure/selection';
 import { StructureSourceControls } from './structure/source';
 import { VolumeStreamingControls } from './structure/volume';
-import { StructureMeasurementsControls } from './structure/measurements';
 
 export class TrajectoryViewportControls extends PluginUIComponent<{}, { show: boolean, label: string }> {
     state = { show: false, label: '' }
@@ -102,9 +103,9 @@ export class TrajectoryViewportControls extends PluginUIComponent<{}, { show: bo
 
         return <div className='msp-traj-controls'>
             {/* <IconButton icon={isAnimating ? 'stop' : 'play'} title={isAnimating ? 'Stop' : 'Play'} onClick={isAnimating ? this.stopAnimation : this.playAnimation} /> */}
-            {!isAnimating && <IconButton icon='model-first' title='First Model' onClick={this.reset} disabled={isAnimating} />}
-            {!isAnimating && <IconButton icon='model-prev' title='Previous Model' onClick={this.prev} disabled={isAnimating} />}
-            {!isAnimating && <IconButton icon='model-next' title='Next Model' onClick={this.next} disabled={isAnimating} />}
+            {!isAnimating && <IconButton svg={SkipPrevious} title='First Model' onClick={this.reset} disabled={isAnimating} />}
+            {!isAnimating && <IconButton svg={NavigateBefore} title='Previous Model' onClick={this.prev} disabled={isAnimating} />}
+            {!isAnimating && <IconButton svg={NavigateNext} title='Next Model' onClick={this.next} disabled={isAnimating} />}
             {!!this.state.label && <span>{this.state.label}</span> }
         </div>;
     }
@@ -192,11 +193,11 @@ export class StateSnapshotViewportControls extends PluginUIComponent<{}, { isBus
                 {!current && <option key='none' value='none'></option>}
                 {snapshots.state.entries.valueSeq().map((e, i) => <option key={e!.snapshot.id} value={e!.snapshot.id}>{`[${i! + 1}/${count}]`} {e!.name || new Date(e!.timestamp).toLocaleString()}</option>)}
             </select>
-            <IconButton icon={isPlaying ? 'stop' : 'play'} title={isPlaying ? 'Pause' : 'Cycle States'} onClick={this.togglePlay}
+            <IconButton svg={isPlaying ? Stop : PlayArrow} title={isPlaying ? 'Pause' : 'Cycle States'} onClick={this.togglePlay}
                 disabled={isPlaying ? false : this.state.isBusy} />
             {!isPlaying && <>
-                <IconButton icon='left-open' title='Previous State' onClick={this.prev} disabled={this.state.isBusy || isPlaying} />
-                <IconButton icon='right-open' title='Next State' onClick={this.next} disabled={this.state.isBusy || isPlaying} />
+                <IconButton svg={NavigateBefore} title='Previous State' onClick={this.prev} disabled={this.state.isBusy || isPlaying} />
+                <IconButton svg={NavigateNext} title='Next State' onClick={this.next} disabled={this.state.isBusy || isPlaying} />
             </>}
         </div>;
     }
@@ -235,7 +236,7 @@ export class AnimationViewportControls extends PluginUIComponent<{}, { isEmpty:
         return <div className='msp-animation-viewport-controls'>
             <div>
                 <div className='msp-semi-transparent-background' />
-                <IconButton icon={isAnimating || isPlaying ? 'stop' : 'tape'} transparent title={isAnimating ? 'Stop' : 'Select Animation'}
+                <IconButton svg={isAnimating || isPlaying ? Stop : Subscriptions} transparent title={isAnimating ? 'Stop' : 'Select Animation'}
                     onClick={isAnimating || isPlaying ? this.stop : this.toggleExpanded}
                     disabled={isAnimating || isPlaying ? false : this.state.isBusy || this.state.isPlaying || this.state.isEmpty} />
             </div>
@@ -299,7 +300,7 @@ export class CustomStructureControls extends PluginUIComponent<{ initiallyCollap
 export class DefaultStructureTools extends PluginUIComponent {
     render() {
         return <>
-            <div className='msp-section-header'><Icon name='tools' />Structure Tools</div>
+            <div className='msp-section-header'><Icon svg={Build} />Structure Tools</div>
 
             <StructureSourceControls />
             <StructureMeasurementsControls />

src/mol-plugin-ui/controls/action-menu.tsx

@@ -8,7 +8,7 @@
 import * as React from 'react';
 import { ParamDefinition } from '../../mol-util/param-definition';
 import { Button, ControlGroup } from './common';
-import { IconName } from './icons';
+import { ArrowRight, Check, Close, ArrowDropDown } from '@material-ui/icons';
 
 export class ActionMenu extends React.PureComponent<ActionMenu.Props> {
     hide = () => this.props.onSelect(void 0)
@@ -17,7 +17,7 @@ export class ActionMenu extends React.PureComponent<ActionMenu.Props> {
         const cmd = this.props;
         const section = <Section items={cmd.items} onSelect={cmd.onSelect} current={cmd.current} multiselect={this.props.multiselect} noOffset={this.props.noOffset} noAccent={this.props.noAccent} />;
         return <div className={`msp-action-menu-options${cmd.header ? '' : ' msp-action-menu-options-no-header'}`}>
-            {cmd.header && <ControlGroup header={cmd.header} initialExpanded={true} hideExpander={true} hideOffset onHeaderClick={this.hide} topRightIcon='off'>
+            {cmd.header && <ControlGroup header={cmd.header} initialExpanded={true} hideExpander={true} hideOffset onHeaderClick={this.hide} topRightIcon={Close}>
                 {section}
             </ControlGroup>}
             {!cmd.header && section}
@@ -41,13 +41,13 @@ export namespace ActionMenu {
 
     export type Items =  Header | Item | Items[]
     export type Header = { kind: 'header', label: string, isIndependent?: boolean, initiallyExpanded?: boolean, description?: string }
-    export type Item = { kind: 'item', label: string, icon?: IconName, disabled?: boolean, selected?: boolean, value: unknown, addOn?: JSX.Element, description?: string }
+    export type Item = { kind: 'item', label: string, icon?: React.FC, disabled?: boolean, selected?: boolean, value: unknown, addOn?: JSX.Element, description?: string }
 
     export function Header(label: string, options?: { isIndependent?: boolean, initiallyExpanded?: boolean, description?: string }): Header {
         return options ? { kind: 'header', label, ...options } : { kind: 'header', label };
     }
 
-    export function Item(label: string, value: unknown, options?: { icon?: IconName, description?: string }): Item {
+    export function Item(label: string, value: unknown, options?: { icon?: React.FC, description?: string }): Item {
         return { kind: 'item', label, value, ...options };
     }
 
@@ -56,7 +56,7 @@ export namespace ActionMenu {
         label?: (t: T) => string,
         value?: (t: T) => any,
         category?: (t: T) => string | undefined,
-        icon?: (t: T) => IconName | undefined,
+        icon?: (t: T) => React.FC | undefined,
         selected?: (t: T) => boolean | undefined,
         addOn?: (t: T) => JSX.Element | undefined
         description?: (t: T) => string | undefined,
@@ -225,13 +225,13 @@ class Section extends React.PureComponent<SectionProps, SectionState> {
         const { header, hasCurrent } = this.state;
 
         return <div className='msp-flex-row msp-control-group-header'>
-            <Button icon={this.state.isExpanded ? 'collapse' : 'expand'} flex noOverflow onClick={this.toggleExpanded} title={`Click to ${this.state.isExpanded ? 'collapse' : 'expand'}.${header?.description ? ` ${header?.description}` : ''}`}>
+            <Button icon={this.state.isExpanded ? ArrowDropDown : ArrowRight} flex noOverflow onClick={this.toggleExpanded} title={`Click to ${this.state.isExpanded ? 'collapse' : 'expand'}.${header?.description ? ` ${header?.description}` : ''}`}>
                 {hasCurrent ? <b>{header?.label}</b> : header?.label}
             </Button>
-            <Button icon='check' flex onClick={this.selectAll} style={{ flex: '0 0 50px', textAlign: 'right' }}>
+            <Button icon={Check} flex onClick={this.selectAll} style={{ flex: '0 0 50px', textAlign: 'right' }}>
                 All
             </Button>
-            <Button icon='cancel' flex onClick={this.selectNone} style={{ flex: '0 0 50px', textAlign: 'right' }}>
+            <Button icon={Close} flex onClick={this.selectNone} style={{ flex: '0 0 50px', textAlign: 'right' }}>
                 None
             </Button>
         </div>;
@@ -241,7 +241,7 @@ class Section extends React.PureComponent<SectionProps, SectionState> {
         const { header, hasCurrent } = this.state;
 
         return <div className='msp-control-group-header' style={{ marginTop: '1px' }}>
-            <Button noOverflow icon={this.state.isExpanded ? 'collapse' : 'expand'} onClick={this.toggleExpanded} title={`Click to ${this.state.isExpanded ? 'collapse' : 'expand'}. ${header?.description ? header?.description : ''}`}>
+            <Button noOverflow icon={this.state.isExpanded ? ArrowDropDown : ArrowRight} onClick={this.toggleExpanded} title={`Click to ${this.state.isExpanded ? 'collapse' : 'expand'}. ${header?.description ? header?.description : ''}`}>
                 {hasCurrent ? <b>{header?.label}</b> : header?.label}
             </Button>
         </div>;

src/mol-plugin-ui/controls/common.tsx

@@ -6,14 +6,15 @@
 
 import * as React from 'react';
 import { Color } from '../../mol-util/color';
-import { IconName, Icon } from './icons';
+import { Icon } from './icons';
+import { ArrowRight, ArrowDropDown, Remove, Add } from '@material-ui/icons';
 
 export class ControlGroup extends React.Component<{
     header: string,
     initialExpanded?: boolean,
     hideExpander?: boolean,
     hideOffset?: boolean,
-    topRightIcon?: IconName,
+    topRightIcon?: React.FC,
     headerLeftMargin?: string,
     onHeaderClick?: () => void,
     noTopMargin?: boolean,
@@ -37,8 +38,8 @@ export class ControlGroup extends React.Component<{
         return <div className='msp-control-group-wrapper' style={{ position: 'relative', marginTop: this.props.noTopMargin ? 0 : void 0 }}>
             <div className='msp-control-group-header' style={{ marginLeft: this.props.headerLeftMargin }}>
                 <Button onClick={this.headerClicked}>
-                    {!this.props.hideExpander && <Icon name={this.state.isExpanded ? 'collapse' : 'expand'} />}
-                    {this.props.topRightIcon && <Icon name={this.props.topRightIcon} style={{ position: 'absolute', right: '2px', top: 0 }} />}
+                    {!this.props.hideExpander && <Icon svg={this.state.isExpanded ? ArrowRight : ArrowDropDown} />}
+                    {this.props.topRightIcon && <Icon svg={this.props.topRightIcon} style={{ position: 'absolute', right: '2px', top: 0 }} />}
                     <b>{this.props.header}</b>
                 </Button>
             </div>
@@ -198,7 +199,7 @@ export class ExpandableControlRow extends React.Component<{
                 {label}
                 <button className='msp-btn-link msp-btn-icon msp-control-group-expander' onClick={this.toggleExpanded} title={`${this.state.isExpanded ? 'Less' : 'More'} options`}
                     style={{ background: 'transparent', textAlign: 'left', padding: '0' }}>
-                    <Icon name={this.state.isExpanded ? 'minus' : 'plus'} style={{ display: 'inline-block' }} />
+                    <Icon svg={this.state.isExpanded ? Remove : Add} style={{ display: 'inline-block' }} />
                 </button>
             </>} control={pivot}>
                 {this.props.colorStripe && <div className='msp-expandable-group-color-stripe' style={{ backgroundColor: Color.toStyle(this.props.colorStripe) }} />}
@@ -210,9 +211,9 @@ export class ExpandableControlRow extends React.Component<{
     }
 }
 
-export function SectionHeader(props: { icon?: IconName, title: string | JSX.Element, desc?: string }) {
+export function SectionHeader(props: { icon?: React.FC, title: string | JSX.Element, desc?: string }) {
     return <div className='msp-section-header'>
-        {props.icon && <Icon name={props.icon} />}
+        {props.icon && <Icon svg={props.icon} />}
         {props.title} <small>{props.desc}</small>
     </div>;
 }
@@ -222,7 +223,7 @@ export type ButtonProps = {
     className?: string,
     disabled?: boolean,
     title?: string,
-    icon?: IconName,
+    icon?: React.FC,
     children?: React.ReactNode,
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void,
     onContextMenu?: (e: React.MouseEvent<HTMLButtonElement>) => void,
@@ -241,6 +242,7 @@ export function Button(props: ButtonProps) {
     if (props.noOverflow) className += ' msp-no-overflow';
     if (props.flex) className += ' msp-flex-item';
     if (props.className) className += ' ' + props.className;
+    if (!props.children) className += ' msp-btn-childless';
 
     let style: React.CSSProperties | undefined = void 0;
     if (props.flex) {
@@ -254,13 +256,13 @@ export function Button(props: ButtonProps) {
 
     return <button onClick={props.onClick} title={props.title} disabled={props.disabled} style={style} className={className} data-id={props['data-id']} data-color={props['data-color']}
         onContextMenu={props.onContextMenu} onMouseEnter={props.onMouseEnter} onMouseLeave={props.onMouseLeave}>
-        {props.icon && <Icon name={props.icon} />}
+        {props.icon && <Icon svg={props.icon} />}
         {props.children}
     </button>;
 }
 
 export function IconButton(props: {
-    icon: IconName,
+    svg?: React.FC,
     small?: boolean,
     onClick: (e: React.MouseEvent<HTMLButtonElement>) => void,
     title?: string,
@@ -280,7 +282,6 @@ export function IconButton(props: {
     if (props.transparent) {
         className += ' msp-transparent-bg';
     }
-    const iconStyle = props.small ? { fontSize: '80%' } : void 0;
 
     let style: React.CSSProperties | undefined = void 0;
     if (props.flex) {
@@ -294,7 +295,7 @@ export function IconButton(props: {
     }
 
     return <button className={className} onClick={props.onClick} title={props.title} disabled={props.disabled} data-id={props['data-id']} style={style}>
-        <Icon name={props.icon} style={iconStyle} />
+        {props.svg && <Icon svg={props.svg} />}
         {props.extraContent}
     </button>;
 }
@@ -305,7 +306,7 @@ export type ToggleButtonProps = {
     disabled?: boolean,
     label?: string | JSX.Element,
     title?: string,
-    icon?: IconName,
+    icon?: React.FC,
     isSelected?: boolean,
     toggle: () => void
 }
@@ -336,7 +337,7 @@ export class ExpandGroup extends React.PureComponent<{ header: string, headerSty
         return <>
             <div className='msp-control-group-header' style={{ marginTop: this.props.marginTop !== void 0 ? this.props.marginTop : '1px', marginLeft: this.props.headerLeftMargin }}>
                 <button className='msp-btn msp-form-control msp-btn-block' onClick={this.toggleExpanded} style={this.props.headerStyle}>
-                    <Icon name={this.state.isExpanded ? 'collapse' : 'expand'} />
+                    <Icon svg={this.state.isExpanded ? ArrowDropDown : ArrowRight} />
                     {this.props.header}
                 </button>
             </div>

src/mol-plugin-ui/controls/icons.tsx

@@ -7,139 +7,75 @@
 
 import * as React from 'react';
 
-export type IconName = FontIconName | SvgIconName
-
 export function Icon(props: {
-    name: IconName | undefined,
+    svg?: React.FC,
+    // name?: IconName | undefined,
     style?: React.CSSProperties,
     title?: string
 }) {
-    if (!props.name) return null;
-    switch (props.name) {
-        case 'union':
-        case 'subtract':
-        case 'intersect':
-        case 'set':
-            return <SvgIcon name={props.name} title={props.title} style={props.style} />;
-        default: return <FontIcon name={props.name} title={props.title} style={props.style} />;
-    }
+    if (!props.svg) return null;
+    return <span className='msp-icon msp-material-icon' title={props.title} style={props.style}><props.svg /></span>;
 }
 
 //
 
-type FontIconName =
-    | '' | 'expand-layout' | 'plus' | 'minus' | 'reset-scene' | 'ok' | 'back' | 'block' | 'off' | 'expand' | 'collapse' | 'visual-visibility'
-    | 'abort' | 'focus-on-visual' | 'settings' | 'tools' | 'log' | 'remove' | 'help' | 'help-circle' | 'info' | 'left-open-big' | 'right-open-big'
-    | 'left-open' | 'right-open' | 'screenshot' | 'model-prev' | 'model-next' | 'model-first' | 'down-thin' | 'up-thin' | 'left-thin' | 'right-thin'
-    | 'switch' | 'play' | 'stop' | 'pause' | 'cw' | 'database' | 'upload' | 'record' | 'code' | 'floppy' | 'tape' | 'flow-cascade' | 'flow-tree'
-    | 'home' | 'address' | 'download' | 'export' | 'palette' | 'search' | 'flashlight' | 'mail' | 'heart' | 'heart-empty' | 'star' | 'star-empty'
-    | 'user' | 'users' | 'user-add' | 'video' | 'picture' | 'camera' | 'layout' | 'menu' | 'check' | 'cancel' | 'cancel-circled' | 'cancel-squared'
-    | 'plus-circled' | 'plus-squared' | 'minus-circled' | 'minus-squared' | 'help-circled' | 'info-circled' | 'link' | 'attach' | 'lock' | 'lock-open'
-    | 'eye' | 'tag' | 'bookmark' | 'bookmarks' | 'flag' | 'thumbs-up' | 'thumbs-down' | 'upload-cloud' | 'reply' | 'reply-all' | 'forward' | 'quote'
-    | 'pencil' | 'feather' | 'print' | 'retweet' | 'keyboard' | 'comment' | 'chat' | 'bell' | 'attention' | 'alert' | 'vcard' | 'location' | 'map'
-    | 'direction' | 'compass' | 'cup' | 'trash' | 'doc' | 'docs' | 'doc-landscape' | 'doc-text' | 'doc-text-inv' | 'newspaper' | 'book-open' | 'book'
-    | 'folder' | 'archive' | 'box' | 'rss' | 'phone' | 'cog' | 'share' | 'shareable' | 'basket' | 'bag' | 'calendar' | 'login' | 'logout' | 'mic'
-    | 'mute' | 'sound' | 'volume' | 'clock' | 'hourglass' | 'lamp' | 'light-down' | 'light-up' | 'adjust' | 'resize-full' | 'resize-small' | 'popup'
-    | 'publish' | 'window' | 'arrow-combo' | 'down-circled' | 'left-circled' | 'right-circled' | 'up-circled' | 'down-open' | 'up-open' | 'down-open-mini'
-    | 'left-open-mini' | 'right-open-mini' | 'up-open-mini' | 'down-open-big' | 'up-open-big' | 'down' | 'left' | 'right' | 'up' | 'down-dir' | 'left-dir'
-    | 'right-dir' | 'up-dir' | 'down-bold' | 'left-bold' | 'right-bold' | 'up-bold' | 'ccw' | 'arrows-ccw' | 'level-down' | 'level-up' | 'shuffle'
-    | 'loop' | 'to-end' | 'to-start' | 'fast-forward' | 'fast-backward' | 'progress-0' | 'progress-1' | 'progress-2' | 'progress-3' | 'target' | 'list'
-    | 'list-add' | 'battery' | 'back-in-time' | 'monitor' | 'mobile' | 'cd' | 'inbox' | 'install' | 'globe' | 'cloud' | 'cloud-thunder' | 'flash'
-    | 'moon' | 'flight' | 'paper-plane' | 'leaf' | 'lifebuoy' | 'mouse' | 'briefcase' | 'suitcase' | 'dot' | 'dot-2' | 'dot-3' | 'brush' | 'infinity'
-    | 'erase' | 'chart-pie' | 'chart-line' | 'chart-bar' | 'chart-area' | 'graduation-cap' | 'language' | 'ticket' | 'water' | 'droplet' | 'air'
-    | 'credit-card' | 'clipboard' | 'megaphone' | 'drive' | 'bucket' | 'thermometer' | 'key' | 'flow-branch' | 'flow-line' | 'flow-parallel' | 'rocket'
-    | 'gauge' | 'help-circle-collapse' | 'help-circle-expand' | 'mouse-plus'
+export function Union() { return _union; }
+export function Subtract() { return _subtract; }
+export function Intersect() { return _intersect; }
+export function SetSvg() { return _set; }
 
-function FontIcon(props: {
-    name: FontIconName,
-    style?: React.CSSProperties,
-    title?: string
-}) {
-    return <span className={`msp-icon msp-icon-${props.name}`} style={props.style} title={props.title} />;
-}
+const circleLeft = <circle r="6px" id="circle-left" cy="12px" cx="8px" strokeWidth="0.5" />;
+const circleRight = <circle r="6px" id="circle-right" cy="12px" cx="16px" strokeWidth="0.5" />;
 
-//
+const _union = <svg width="24px" height="24px" viewBox="0 0 24 24">
+    <defs>
+        {circleLeft}
+        {circleRight}
+    </defs>
+    <g>
+        <use href="#circle-left" className="msp-shape-filled" />
+        <use href="#circle-right" className="msp-shape-filled" />
+        <use href="#circle-left" className="msp-shape-empty" />
+    </g>
+</svg>;
 
-type SvgIconName =
-    | '' | 'set' | 'intersect' | 'union' | 'subtract'
+const _subtract = <svg width="24px" height="24px" viewBox="0 0 24 24">
+    <defs>
+        {circleLeft}
+        {circleRight}
+        <mask id="mask-left">
+            <use href="#circle-left" fill="white" stroke="white" />
+            <use href="#circle-right" fill="black" strokeWidth="0" stroke="white" />
+        </mask>
+    </defs>
+    <g>
+        <use href="#circle-left" className="msp-shape-filled" mask="url(#mask-left)" />
+        <use href="#circle-right" className="msp-shape-empty" />
+    </g>
+</svg>;
 
-function SvgIcon(props: {
-    name: SvgIconName,
-    style?: React.CSSProperties,
-    title?: string
-}) {
-    return <div className='msp-icon msp-svg-icon' style={props.style} title={props.title}>{getSvg(props.name)}</div>;
-}
-
-function getSvg(name: SvgIconName) {
-    switch (name) {
-        case 'union': return <Union />;
-        case 'subtract': return <Subtract />;
-        case 'intersect': return <Intersect />;
-        case 'set': return <Set />;
-    }
-}
-
-const circleLeft = <circle r="6px" id="circle-left" cy="16px" cx="12px" strokeWidth="0.5"/>;
-const circleRight = <circle r="6px" id="circle-right" cy="16px" cx="20px" strokeWidth="0.5"/>;
-
-function Union() {
-    return <svg width="32px" height="32px" viewBox="0 0 32 32">
-        <defs>
-            {circleLeft}
-            {circleRight}
-        </defs>
-        <g>
-            <use href="#circle-left" className="msp-shape-filled"/>
-            <use href="#circle-right" className="msp-shape-filled"/>
-            <use href="#circle-left" className="msp-shape-empty"/>
-        </g>
-    </svg>;
-}
-
-function Subtract() {
-    return <svg width="32px" height="32px" viewBox="0 0 32 32">
-        <defs>
-            {circleLeft}
-            {circleRight}
-            <mask id="mask-left">
-                <use href="#circle-left" fill="white" stroke="white"/>
-                <use href="#circle-right" fill="black" strokeWidth="0" stroke="white"/>
-            </mask>
-        </defs>
-        <g>
-            <use href="#circle-left" className="msp-shape-filled" mask="url(#mask-left)"/>
-            <use href="#circle-right" className="msp-shape-empty"/>
-        </g>
-    </svg>;
-}
-
-function Intersect() {
-    return <svg width="32px" height="32px" viewBox="0 0 32 32">
-        <defs>
-            {circleLeft}
-            {circleRight}
-            <clipPath id="clip-left">
-                <use href="#circle-right"/>
-            </clipPath>
-        </defs>
-        <g>
-            <use href="#circle-left" className="msp-shape-filled" clipPath="url(#clip-left)"/>
-            <use href="#circle-left" className="msp-shape-empty"/>
-            <use href="#circle-right" className="msp-shape-empty"/>
-        </g>
-    </svg>;
-}
+const _intersect = <svg width="24px" height="24px" viewBox="0 0 24 24">
+    <defs>
+        {circleLeft}
+        {circleRight}
+        <clipPath id="clip-left">
+            <use href="#circle-right" />
+        </clipPath>
+    </defs>
+    <g>
+        <use href="#circle-left" className="msp-shape-filled" clipPath="url(#clip-left)" />
+        <use href="#circle-left" className="msp-shape-empty" />
+        <use href="#circle-right" className="msp-shape-empty" />
+    </g>
+</svg>;
 
-function Set() {
-    return <svg width="32px" height="32px" viewBox="0 0 32 32">
-        <defs>
-            {circleLeft}
-            {circleRight}
-        </defs>
-        <g>
-            <use href="#circle-left" className="msp-shape-empty"/>
-            <use href="#circle-right" className="msp-shape-filled"/>
-        </g>
-    </svg>;
-}
+const _set = <svg width="24px" height="24px" viewBox="0 0 24 24">
+    <defs>
+        {circleLeft}
+        {circleRight}
+    </defs>
+    <g>
+        <use href="#circle-left" className="msp-shape-empty" />
+        <use href="#circle-right" className="msp-shape-filled" />
+    </g>
+</svg>;

src/mol-plugin-ui/controls/parameters.tsx

@@ -5,21 +5,22 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
+import { ArrowDownward, ArrowUpward, BookmarksOutlined, Delete, MoreHoriz, HelpOutline, Check, Clear, ArrowRight, ArrowDropDown } from '@material-ui/icons';
 import * as React from 'react';
-import { Vec2, Vec3, Mat4 } from '../../mol-math/linear-algebra';
+import { Mat4, Vec2, Vec3 } from '../../mol-math/linear-algebra';
 import { PluginContext } from '../../mol-plugin/context';
 import { Color } from '../../mol-util/color';
-import { ColorListOptions, ColorListOptionsScale, ColorListOptionsSet, getColorListFromName, ColorListName } from '../../mol-util/color/lists';
+import { ColorListName, ColorListOptions, ColorListOptionsScale, ColorListOptionsSet, getColorListFromName } from '../../mol-util/color/lists';
 import { Legend as LegendData } from '../../mol-util/legend';
 import { memoize1, memoizeLatest } from '../../mol-util/memoize';
 import { getPrecision } from '../../mol-util/number';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { ParamMapping } from '../../mol-util/param-mapping';
 import { camelCaseToWords } from '../../mol-util/string';
-import { PluginUIComponent, _Props, _State } from '../base';
+import { PluginUIComponent } from '../base';
 import { ActionMenu } from './action-menu';
 import { ColorOptions, ColorValueOption, CombinedColorControl } from './color';
-import { ControlGroup, ExpandGroup, IconButton, TextInput, ToggleButton, Button, ControlRow } from './common';
+import { Button, ControlGroup, ControlRow, ExpandGroup, IconButton, TextInput, ToggleButton } from './common';
 import { Icon } from './icons';
 import { legendFor } from './legend';
 import LineGraphComponent from './line-graph/line-graph-component';
@@ -204,7 +205,7 @@ export class ParamHelp<L extends LegendData> extends React.PureComponent<{ legen
 
         return <div className='msp-help-text'>
             <div>
-                <div className='msp-help-description'><Icon name='help-circle' />{description}</div>
+                <div className='msp-help-description'><Icon svg={HelpOutline} />{description}</div>
                 {Legend && <div className='msp-help-legend'><Legend legend={legend} /></div>}
             </div>
         </div>;
@@ -247,7 +248,8 @@ function renderSimple(options: { props: ParamProps<any>, state: { showHelp: bool
                     <button className='msp-help msp-btn-link msp-btn-icon msp-control-group-expander' onClick={toggleHelp}
                         title={desc || `${state.showHelp ? 'Hide' : 'Show'} help`}
                         style={{ background: 'transparent', textAlign: 'left', padding: '0' }}>
-                        <Icon name={state.showHelp ? 'help-circle-collapse' : 'help-circle-expand'} />
+                        {/* TODO: <Icon name={state.showHelp ? 'help-circle-collapse' : 'help-circle-expand'} /> */}
+                        <Icon svg={HelpOutline} />
                     </button>
                 }
             </>}
@@ -287,7 +289,7 @@ export class BoolControl extends SimpleParam<PD.BooleanParam> {
     onClick = (e: React.MouseEvent<HTMLButtonElement>) => { this.update(!this.props.value); e.currentTarget.blur(); }
     renderControl() {
         return <button onClick={this.onClick} disabled={this.props.isDisabled}>
-            <Icon name={this.props.value ? 'ok' : 'off'} />
+            <Icon svg={this.props.value ? Check : Clear} />
             {this.props.value ? 'On' : 'Off'}
         </button>;
     }
@@ -453,9 +455,9 @@ export class SelectControl extends React.PureComponent<ParamProps<PD.Select<stri
         const toggle = this.props.param.cycle ? this.cycle : this.toggle;
         const textAlign = this.props.param.cycle ? 'center' : 'left';
         const icon = this.props.param.cycle
-            ? (this.props.value === 'on' ? 'ok'
-                : this.props.value === 'off' ? 'off' : '')
-            : '';
+            ? (this.props.value === 'on' ? Check
+                : this.props.value === 'off' ? Clear : void 0)
+            : void 0;
 
         return <ToggleButton disabled={this.props.isDisabled} style={{ textAlign, overflow: 'hidden', textOverflow: 'ellipsis' }}
             label={label} title={label as string} icon={icon} toggle={toggle} isSelected={this.state.showOptions} />;
@@ -631,7 +633,7 @@ export class ColorListControl extends React.PureComponent<ParamProps<PD.ColorLis
                 {value.colors.length === 1 ? '1 color' : `${value.colors.length} colors`}
                 <div style={colorStripStyle(value, '33px')} />
             </button>
-            <IconButton icon='bookmarks' onClick={this.togglePresets} toggleState={this.state.show === 'presets'} title='Color Presets'
+            <IconButton svg={BookmarksOutlined} onClick={this.togglePresets} toggleState={this.state.show === 'presets'} title='Color Presets'
                 style={{ padding: 0, position: 'absolute', right: 0, top: 0, width: '32px' }} />
         </>;
     }
@@ -893,7 +895,7 @@ export class GroupControl extends React.PureComponent<ParamProps<PD.Group<any>>
         if (!this.state.isExpanded) {
             return <div className='msp-mapped-parameter-group'>
                 {ctrl}
-                <IconButton icon='dot-3' onClick={this.toggleExpanded} toggleState={this.state.isExpanded} title={`More Options`} />
+                <IconButton svg={MoreHoriz} onClick={this.toggleExpanded} toggleState={this.state.isExpanded} title={`More Options`} />
             </div>;
         }
 
@@ -904,7 +906,7 @@ export class GroupControl extends React.PureComponent<ParamProps<PD.Group<any>>
 
         return <div className='msp-mapped-parameter-group'>
             {ctrl}
-            <IconButton icon='dot-3' onClick={this.toggleExpanded} toggleState={this.state.isExpanded} title={`More Options`} />
+            <IconButton svg={MoreHoriz} onClick={this.toggleExpanded} toggleState={this.state.isExpanded} title={`More Options`} />
             <div className='msp-control-offset'>
                 <ParameterControls params={filtered} onEnter={this.props.onEnter} values={this.props.value} onChange={this.onChangeParam} isDisabled={this.props.isDisabled} />
             </div>
@@ -934,7 +936,7 @@ export class GroupControl extends React.PureComponent<ParamProps<PD.Group<any>>
         return <div className='msp-control-group-wrapper'>
             <div className='msp-control-group-header'>
                 <button className='msp-btn msp-form-control msp-btn-block' onClick={this.toggleExpanded}>
-                    <Icon name={this.state.isExpanded ? 'collapse' : 'expand'} />
+                    <Icon svg={this.state.isExpanded ? ArrowDropDown : ArrowRight} />
                     {label}
                 </button>
             </div>
@@ -1010,7 +1012,7 @@ export class MappedControl extends React.PureComponent<ParamProps<PD.Mapped<any>
             if (!this.areParamsEmpty(param.params)) {
                 return <div className='msp-mapped-parameter-group'>
                     {Select}
-                    <IconButton icon='dot-3' onClick={this.toggleExpanded} toggleState={this.state.isExpanded} title={`${label} Properties`} />
+                    <IconButton svg={MoreHoriz} onClick={this.toggleExpanded} toggleState={this.state.isExpanded} title={`${label} Properties`} />
                     {this.state.isExpanded && <GroupControl inMapped param={param} value={value.params} name={value.name} onChange={this.onChangeParam} onEnter={this.props.onEnter} isDisabled={this.props.isDisabled} />}
                 </div>;
             }
@@ -1088,9 +1090,9 @@ class ObjectListItem extends React.PureComponent<ObjectListItemProps, { isExpand
                     {this.props.param.getLabel(this.props.value)}
                 </button>
                 <div>
-                    <IconButton icon='up-thin' title='Move Up' onClick={this.moveUp} small={true} />
-                    <IconButton icon='down-thin' title='Move Down' onClick={this.moveDown} small={true} />
-                    <IconButton icon='remove' title='Remove' onClick={this.remove} small={true} />
+                    <IconButton svg={ArrowDownward} title='Move Up' onClick={this.moveUp} small={true} />
+                    <IconButton svg={ArrowUpward} title='Move Down' onClick={this.moveDown} small={true} />
+                    <IconButton svg={Delete} title='Remove' onClick={this.remove} small={true} />
                 </div>
             </div>
             {this.state.isExpanded && <div className='msp-control-offset'>

src/mol-plugin-ui/left-panel.tsx

@@ -17,7 +17,7 @@ import { ParamDefinition as PD } from '../mol-util/param-definition';
 import { StateSnapshots, RemoteStateSnapshots } from './state/snapshots';
 import { HelpContent } from './viewport/help';
 import { LeftPanelTabName } from '../mol-plugin/layout';
-import { IconName } from './controls/icons';
+import { Home, HelpOutline, Save, Tune, Delete, AccountTree } from '@material-ui/icons';
 
 export class LeftPanelControls extends PluginUIComponent<{}, { tab: LeftPanelTabName }> {
     state = { tab: this.plugin.behaviors.layout.leftPanelTabName.value };
@@ -52,21 +52,21 @@ export class LeftPanelControls extends PluginUIComponent<{}, { tab: LeftPanelTab
     tabs: { [K in LeftPanelTabName]: JSX.Element } = {
         'none': <></>,
         'root': <>
-            <SectionHeader icon='home' title='Home' />
+            <SectionHeader icon={Home} title='Home' />
             <StateObjectActions state={this.plugin.state.data} nodeRef={StateTransform.RootRef} hideHeader={true} initiallyCollapsed={true} alwaysExpandFirst={true} />
             {this.plugin.spec.components?.remoteState !== 'none' && <RemoteStateSnapshots listOnly /> }
         </>,
         'data': <>
-            <SectionHeader icon='flow-tree' title={<><RemoveAllButton /> State Tree</>} />
+            <SectionHeader icon={AccountTree} title={<><RemoveAllButton /> State Tree</>} />
             <StateTree state={this.plugin.state.data} />
         </>,
         'states': <StateSnapshots />,
         'settings': <>
-            <SectionHeader icon='settings' title='Plugin Settings' />
+            <SectionHeader icon={Tune} title='Plugin Settings' />
             <FullSettings />
         </>,
         'help': <>
-            <SectionHeader icon='help-circle' title='Help' />
+            <SectionHeader icon={HelpOutline} title='Help' />
             <HelpContent />
         </>
     }
@@ -77,13 +77,13 @@ export class LeftPanelControls extends PluginUIComponent<{}, { tab: LeftPanelTab
         // TODO: show "changed dot" next to the 'data' tab icon indicating the state has changed.
         return <div className='msp-left-panel-controls'>
             <div className='msp-left-panel-controls-buttons'>
-                <IconButton icon='home' toggleState={tab === 'root'} transparent onClick={() => this.set('root')} title='Home' />
+                <IconButton svg={Home} toggleState={tab === 'root'} transparent onClick={() => this.set('root')} title='Home' />
                 {/* <IconButton icon='flow-tree' toggleState={tab === 'data'} onClick={() => this.set('data')} title='State Tree' /> */}
                 <DataIcon set={this.set} />
-                <IconButton icon='floppy' toggleState={tab === 'states'} transparent onClick={() => this.set('states')} title='Plugin State' />
-                <IconButton icon='help-circle' toggleState={tab === 'help'} transparent onClick={() => this.set('help')} title='Help' />
+                <IconButton svg={Save} toggleState={tab === 'states'} transparent onClick={() => this.set('states')} title='Plugin State' />
+                <IconButton svg={HelpOutline} toggleState={tab === 'help'} transparent onClick={() => this.set('help')} title='Help' />
                 <div className='msp-left-panel-controls-buttons-bottom'>
-                    <IconButton icon='settings' toggleState={tab === 'settings'} transparent onClick={() => this.set('settings')} title='Settings' />
+                    <IconButton svg={Tune} toggleState={tab === 'settings'} transparent onClick={() => this.set('settings')} title='Settings' />
                 </div>
             </div>
             <div className='msp-scrollable-container'>
@@ -113,7 +113,7 @@ class DataIcon extends PluginUIComponent<{ set: (tab: LeftPanelTabName) => void
 
     render() {
         return <IconButton
-            icon='flow-tree' toggleState={this.tab === 'data'} transparent onClick={() => this.props.set('data')} title='State Tree'
+            svg={AccountTree} toggleState={this.tab === 'data'} transparent onClick={() => this.props.set('data')} title='State Tree'
             style={{ position: 'relative' }} extraContent={this.state.changed ? <div className='msp-left-panel-controls-button-data-dirty' /> : void 0} />;
     }
 }
@@ -134,10 +134,6 @@ class FullSettings extends PluginUIComponent {
         });
     }
 
-    icon(name: IconName, onClick: (e: React.MouseEvent<HTMLButtonElement>) => void, title: string, isOn = true) {
-        return <IconButton icon={name} toggleState={isOn} onClick={onClick} title={title} />;
-    }
-
     render() {
         return <>
             {this.plugin.canvas3d && <>
@@ -169,6 +165,6 @@ export class RemoveAllButton extends PluginUIComponent<{ }> {
     render() {
         const count = this.plugin.state.data.tree.children.get(StateTransform.RootRef).size;
         if (count === 0) return null;
-        return <IconButton icon='remove' onClick={this.remove} title={'Remove All'} style={{ display: 'inline-block' }} small className='msp-no-hover-outline' transparent />;
+        return <IconButton svg={Delete} onClick={this.remove} title={'Remove All'} style={{ display: 'inline-block' }} small className='msp-no-hover-outline' transparent />;
     }
 }

src/mol-plugin-ui/sequence.tsx

@@ -22,6 +22,7 @@ import { ElementSequenceWrapper } from './sequence/element';
 import { elementLabel } from '../mol-theme/label';
 import { Icon } from './controls/icons';
 import { StructureSelectionManager } from '../mol-plugin-state/manager/structure/selection';
+import { HelpOutline } from '@material-ui/icons';
 
 const MaxDisplaySequenceLength = 5000;
 
@@ -295,7 +296,7 @@ export class SequenceView extends PluginUIComponent<{ }, SequenceViewState> {
         if (this.getStructure(this.state.structureRef) === Structure.Empty) {
             return <div className='msp-sequence'>
                 <div className='msp-sequence-select'>
-                    <Icon name='help-circle' style={{ cursor: 'help', position: 'absolute', right: 0, top: 0 }}
+                    <Icon svg={HelpOutline} style={{ cursor: 'help', position: 'absolute', right: 0, top: 0 }}
                         title='This shows a single sequence. Use the controls to show a different sequence.'/>
 
                     <span>Sequence</span><span style={{ fontWeight: 'normal' }}>No structure available</span>
@@ -310,7 +311,7 @@ export class SequenceView extends PluginUIComponent<{ }, SequenceViewState> {
 
         return <div className='msp-sequence'>
             <div className='msp-sequence-select'>
-                <Icon name='help-circle' style={{ cursor: 'help', position: 'absolute', right: 0, top: 0 }}
+                <Icon svg={HelpOutline} style={{ cursor: 'help', position: 'absolute', right: 0, top: 0 }}
                     title='This shows a single sequence. Use the controls to show a different sequence.' />
 
                 <span>Sequence of</span>

src/mol-plugin-ui/skin/base/base.scss

@@ -1,16 +1,4 @@
-@font-face {
-  font-family: 'fontello';
-  src: url('./fonts/fontello.eot?22556350');
-  src: url('./fonts/fontello.eot?22556350#iefix') format('embedded-opentype'),
-       url('./fonts/fontello.woff2?22556350') format('woff2'),
-       url('./fonts/fontello.woff?22556350') format('woff'),
-       url('./fonts/fontello.ttf?22556350') format('truetype'),
-       url('./fonts/fontello.svg?22556350#fontello') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
-
-@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700);
+// @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700);
 
 @mixin user-select($select) {
   -webkit-user-select: $select;
@@ -20,7 +8,7 @@
 }
 
 .msp-plugin {
-    font-family: "Helvetica Neue", "Source Sans Pro", Helvetica, Arial, sans-serif;
+    font-family: "Helvetica Neue", "Segoe UI", Helvetica, "Source Sans Pro", Arial, sans-serif;
     font-size: 14px;
     line-height: 1.42857143;
 

src/mol-plugin-ui/skin/base/components/controls-base.scss

@@ -88,6 +88,38 @@
     outline: none;
 }
 
+// .msp-btn-icon, .msp-btn-icon-small {
+//     svg {
+//         display: inline-flex;
+//         vertical-align: middle;
+//         font-size: 1rem;
+//         margin-bottom: 3px;
+//     }
+// }
+
+.msp-material-icon {
+    svg {
+        display: inline-flex;
+        vertical-align: middle;
+        font-size: 1rem;
+        margin-bottom: 3px;
+    }
+}
+
+.msp-btn-block {
+    .msp-material-icon {
+        margin-left: 0;
+        margin-right: .4em;
+    }
+}
+
+.msp-btn-childless {
+    .msp-material-icon {
+        margin-left: 0;
+        margin-right: 0;
+    }
+}
+
 .msp-btn-icon {
     border: none;
     height: $row-height;
@@ -113,7 +145,7 @@
     border: none;
     height: $row-height;
     width: 20px;
-    font-size: 85%;
+    // font-size: 85%;
     line-height: $row-height;
     padding: 0;
     text-align: center;

src/mol-plugin-ui/skin/base/components/misc.scss

@@ -512,7 +512,6 @@
         margin-top: 1px;
         display: flex;
         .msp-icon {
-            font-size: 80%;
             margin-right: 6px;
         }
     }

src/mol-plugin-ui/skin/fonts/fontello.html

@@ -1,627 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head><!--[if lt IE 9]><script language="javascript" type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
-    <meta charset="UTF-8"><style>/*
- * Bootstrap v2.2.1
- *
- * Copyright 2012 Twitter, Inc
- * Licensed under the Apache License v2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Designed and built with all the love in the world @twitter by @mdo and @fat.
- */
-.clearfix {
-  *zoom: 1;
-}
-.clearfix:before,
-.clearfix:after {
-  display: table;
-  content: "";
-  line-height: 0;
-}
-.clearfix:after {
-  clear: both;
-}
-html {
-  font-size: 100%;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-}
-a:focus {
-  outline: thin dotted #333;
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: -2px;
-}
-a:hover,
-a:active {
-  outline: 0;
-}
-button,
-input,
-select,
-textarea {
-  margin: 0;
-  font-size: 100%;
-  vertical-align: middle;
-}
-button,
-input {
-  *overflow: visible;
-  line-height: normal;
-}
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-  padding: 0;
-  border: 0;
-}
-body {
-  margin: 0;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  line-height: 20px;
-  color: #333;
-  background-color: #fff;
-}
-a {
-  color: #08c;
-  text-decoration: none;
-}
-a:hover {
-  color: #005580;
-  text-decoration: underline;
-}
-.row {
-  margin-left: -20px;
-  *zoom: 1;
-}
-.row:before,
-.row:after {
-  display: table;
-  content: "";
-  line-height: 0;
-}
-.row:after {
-  clear: both;
-}
-[class*="span"] {
-  float: left;
-  min-height: 1px;
-  margin-left: 20px;
-}
-.container,
-.navbar-static-top .container,
-.navbar-fixed-top .container,
-.navbar-fixed-bottom .container {
-  width: 940px;
-}
-.span12 {
-  width: 940px;
-}
-.span11 {
-  width: 860px;
-}
-.span10 {
-  width: 780px;
-}
-.span9 {
-  width: 700px;
-}
-.span8 {
-  width: 620px;
-}
-.span7 {
-  width: 540px;
-}
-.span6 {
-  width: 460px;
-}
-.span5 {
-  width: 380px;
-}
-.span4 {
-  width: 300px;
-}
-.span3 {
-  width: 220px;
-}
-.span2 {
-  width: 140px;
-}
-.span1 {
-  width: 60px;
-}
-[class*="span"].pull-right,
-.row-fluid [class*="span"].pull-right {
-  float: right;
-}
-.container {
-  margin-right: auto;
-  margin-left: auto;
-  *zoom: 1;
-}
-.container:before,
-.container:after {
-  display: table;
-  content: "";
-  line-height: 0;
-}
-.container:after {
-  clear: both;
-}
-p {
-  margin: 0 0 10px;
-}
-.lead {
-  margin-bottom: 20px;
-  font-size: 21px;
-  font-weight: 200;
-  line-height: 30px;
-}
-small {
-  font-size: 85%;
-}
-h1 {
-  margin: 10px 0;
-  font-family: inherit;
-  font-weight: bold;
-  line-height: 20px;
-  color: inherit;
-  text-rendering: optimizelegibility;
-}
-h1 small {
-  font-weight: normal;
-  line-height: 1;
-  color: #999;
-}
-h1 {
-  line-height: 40px;
-}
-h1 {
-  font-size: 38.5px;
-}
-h1 small {
-  font-size: 24.5px;
-}
-body {
-  margin-top: 90px;
-}
-.header {
-  position: fixed;
-  top: 0;
-  left: 50%;
-  margin-left: -480px;
-  background-color: #fff;
-  border-bottom: 1px solid #ddd;
-  padding-top: 10px;
-  z-index: 10;
-}
-.footer {
-  color: #ddd;
-  font-size: 12px;
-  text-align: center;
-  margin-top: 20px;
-}
-.footer a {
-  color: #ccc;
-  text-decoration: underline;
-}
-.the-icons {
-  font-size: 14px;
-  line-height: 24px;
-}
-.switch {
-  position: absolute;
-  right: 0;
-  bottom: 10px;
-  color: #666;
-}
-.switch input {
-  margin-right: 0.3em;
-}
-.codesOn .i-name {
-  display: none;
-}
-.codesOn .i-code {
-  display: inline;
-}
-.i-code {
-  display: none;
-}
-@font-face {
-      font-family: 'fontello';
-      src: url('./fontello.eot?15936540');
-      src: url('./fontello.eot?15936540#iefix') format('embedded-opentype'),
-           url('./fontello.woff?15936540') format('woff'),
-           url('./fontello.ttf?15936540') format('truetype'),
-           url('./fontello.svg?15936540#fontello') format('svg');
-      font-weight: normal;
-      font-style: normal;
-    }
-     
-     
-    .demo-icon
-    {
-      font-family: "fontello";
-      font-style: normal;
-      font-weight: normal;
-     
-      display: inline-block;
-      text-decoration: inherit;
-      width: 1em;
-      margin-right: .2em;
-      text-align: center;
-      /* opacity: .8; */
-     
-      /* For safety - reset parent styles, that can break glyph codes*/
-      font-variant: normal;
-      text-transform: none;
-     
-      /* fix buttons height, for twitter bootstrap */
-      line-height: 1em;
-     
-      /* Animation center compensation - margins should be symmetric */
-      /* remove if not needed */
-      margin-left: .2em;
-     
-      /* You can be more comfortable with increased icons size */
-      /* font-size: 120%; */
-     
-      /* Font smoothing. That was taken from TWBS */
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-     
-      /* Uncomment for 3D effect */
-      /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
-    }
-     </style>
-    <script>
-      function toggleCodes(on) {
-        var obj = document.getElementById('icons');
-      
-        if (on) {
-          obj.className += ' codesOn';
-        } else {
-          obj.className = obj.className.replace(' codesOn', '');
-        }
-      }
-      
-    </script>
-  </head>
-  <body>
-    <div class="container header">
-      <h1>
-        Icons
-      </h1>
-      <label class="switch">
-        <input type="checkbox" onclick="toggleCodes(this.checked)">show codes
-      </label>
-    </div>
-    <div id="icons" class="container">
-      <div class="row">
-        <div title="Code: 0xe800" class="the-icons span3"><i class="demo-icon icon-palette">&#xe800;</i> <span class="i-name">icon-palette</span><span class="i-code">0xe800</span></div>
-        <div title="Code: 0xe803" class="the-icons span3"><i class="demo-icon icon-search">&#xe803;</i> <span class="i-name">icon-search</span><span class="i-code">0xe803</span></div>
-        <div title="Code: 0xe804" class="the-icons span3"><i class="demo-icon icon-flashlight">&#xe804;</i> <span class="i-name">icon-flashlight</span><span class="i-code">0xe804</span></div>
-        <div title="Code: 0xe805" class="the-icons span3"><i class="demo-icon icon-mail">&#xe805;</i> <span class="i-name">icon-mail</span><span class="i-code">0xe805</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe806" class="the-icons span3"><i class="demo-icon icon-heart">&#xe806;</i> <span class="i-name">icon-heart</span><span class="i-code">0xe806</span></div>
-        <div title="Code: 0xe807" class="the-icons span3"><i class="demo-icon icon-heart-empty">&#xe807;</i> <span class="i-name">icon-heart-empty</span><span class="i-code">0xe807</span></div>
-        <div title="Code: 0xe808" class="the-icons span3"><i class="demo-icon icon-star">&#xe808;</i> <span class="i-name">icon-star</span><span class="i-code">0xe808</span></div>
-        <div title="Code: 0xe809" class="the-icons span3"><i class="demo-icon icon-star-empty">&#xe809;</i> <span class="i-name">icon-star-empty</span><span class="i-code">0xe809</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe80a" class="the-icons span3"><i class="demo-icon icon-user">&#xe80a;</i> <span class="i-name">icon-user</span><span class="i-code">0xe80a</span></div>
-        <div title="Code: 0xe80b" class="the-icons span3"><i class="demo-icon icon-users">&#xe80b;</i> <span class="i-name">icon-users</span><span class="i-code">0xe80b</span></div>
-        <div title="Code: 0xe80c" class="the-icons span3"><i class="demo-icon icon-user-add">&#xe80c;</i> <span class="i-name">icon-user-add</span><span class="i-code">0xe80c</span></div>
-        <div title="Code: 0xe80d" class="the-icons span3"><i class="demo-icon icon-video">&#xe80d;</i> <span class="i-name">icon-video</span><span class="i-code">0xe80d</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe80e" class="the-icons span3"><i class="demo-icon icon-picture">&#xe80e;</i> <span class="i-name">icon-picture</span><span class="i-code">0xe80e</span></div>
-        <div title="Code: 0xe80f" class="the-icons span3"><i class="demo-icon icon-camera">&#xe80f;</i> <span class="i-name">icon-camera</span><span class="i-code">0xe80f</span></div>
-        <div title="Code: 0xe810" class="the-icons span3"><i class="demo-icon icon-layout">&#xe810;</i> <span class="i-name">icon-layout</span><span class="i-code">0xe810</span></div>
-        <div title="Code: 0xe811" class="the-icons span3"><i class="demo-icon icon-menu">&#xe811;</i> <span class="i-name">icon-menu</span><span class="i-code">0xe811</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe812" class="the-icons span3"><i class="demo-icon icon-check">&#xe812;</i> <span class="i-name">icon-check</span><span class="i-code">0xe812</span></div>
-        <div title="Code: 0xe813" class="the-icons span3"><i class="demo-icon icon-cancel">&#xe813;</i> <span class="i-name">icon-cancel</span><span class="i-code">0xe813</span></div>
-        <div title="Code: 0xe814" class="the-icons span3"><i class="demo-icon icon-cancel-circled">&#xe814;</i> <span class="i-name">icon-cancel-circled</span><span class="i-code">0xe814</span></div>
-        <div title="Code: 0xe815" class="the-icons span3"><i class="demo-icon icon-cancel-squared">&#xe815;</i> <span class="i-name">icon-cancel-squared</span><span class="i-code">0xe815</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe816" class="the-icons span3"><i class="demo-icon icon-plus">&#xe816;</i> <span class="i-name">icon-plus</span><span class="i-code">0xe816</span></div>
-        <div title="Code: 0xe817" class="the-icons span3"><i class="demo-icon icon-plus-circled">&#xe817;</i> <span class="i-name">icon-plus-circled</span><span class="i-code">0xe817</span></div>
-        <div title="Code: 0xe818" class="the-icons span3"><i class="demo-icon icon-plus-squared">&#xe818;</i> <span class="i-name">icon-plus-squared</span><span class="i-code">0xe818</span></div>
-        <div title="Code: 0xe819" class="the-icons span3"><i class="demo-icon icon-minus">&#xe819;</i> <span class="i-name">icon-minus</span><span class="i-code">0xe819</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe81a" class="the-icons span3"><i class="demo-icon icon-minus-circled">&#xe81a;</i> <span class="i-name">icon-minus-circled</span><span class="i-code">0xe81a</span></div>
-        <div title="Code: 0xe81b" class="the-icons span3"><i class="demo-icon icon-minus-squared">&#xe81b;</i> <span class="i-name">icon-minus-squared</span><span class="i-code">0xe81b</span></div>
-        <div title="Code: 0xe81c" class="the-icons span3"><i class="demo-icon icon-help">&#xe81c;</i> <span class="i-name">icon-help</span><span class="i-code">0xe81c</span></div>
-        <div title="Code: 0xe81d" class="the-icons span3"><i class="demo-icon icon-help-circled">&#xe81d;</i> <span class="i-name">icon-help-circled</span><span class="i-code">0xe81d</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe81e" class="the-icons span3"><i class="demo-icon icon-info">&#xe81e;</i> <span class="i-name">icon-info</span><span class="i-code">0xe81e</span></div>
-        <div title="Code: 0xe81f" class="the-icons span3"><i class="demo-icon icon-info-circled">&#xe81f;</i> <span class="i-name">icon-info-circled</span><span class="i-code">0xe81f</span></div>
-        <div title="Code: 0xe820" class="the-icons span3"><i class="demo-icon icon-back">&#xe820;</i> <span class="i-name">icon-back</span><span class="i-code">0xe820</span></div>
-        <div title="Code: 0xe821" class="the-icons span3"><i class="demo-icon icon-home">&#xe821;</i> <span class="i-name">icon-home</span><span class="i-code">0xe821</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe822" class="the-icons span3"><i class="demo-icon icon-link">&#xe822;</i> <span class="i-name">icon-link</span><span class="i-code">0xe822</span></div>
-        <div title="Code: 0xe823" class="the-icons span3"><i class="demo-icon icon-attach">&#xe823;</i> <span class="i-name">icon-attach</span><span class="i-code">0xe823</span></div>
-        <div title="Code: 0xe824" class="the-icons span3"><i class="demo-icon icon-lock">&#xe824;</i> <span class="i-name">icon-lock</span><span class="i-code">0xe824</span></div>
-        <div title="Code: 0xe825" class="the-icons span3"><i class="demo-icon icon-lock-open">&#xe825;</i> <span class="i-name">icon-lock-open</span><span class="i-code">0xe825</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe826" class="the-icons span3"><i class="demo-icon icon-eye">&#xe826;</i> <span class="i-name">icon-eye</span><span class="i-code">0xe826</span></div>
-        <div title="Code: 0xe827" class="the-icons span3"><i class="demo-icon icon-tag">&#xe827;</i> <span class="i-name">icon-tag</span><span class="i-code">0xe827</span></div>
-        <div title="Code: 0xe828" class="the-icons span3"><i class="demo-icon icon-bookmark">&#xe828;</i> <span class="i-name">icon-bookmark</span><span class="i-code">0xe828</span></div>
-        <div title="Code: 0xe829" class="the-icons span3"><i class="demo-icon icon-bookmarks">&#xe829;</i> <span class="i-name">icon-bookmarks</span><span class="i-code">0xe829</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe82a" class="the-icons span3"><i class="demo-icon icon-flag">&#xe82a;</i> <span class="i-name">icon-flag</span><span class="i-code">0xe82a</span></div>
-        <div title="Code: 0xe82b" class="the-icons span3"><i class="demo-icon icon-thumbs-up">&#xe82b;</i> <span class="i-name">icon-thumbs-up</span><span class="i-code">0xe82b</span></div>
-        <div title="Code: 0xe82c" class="the-icons span3"><i class="demo-icon icon-thumbs-down">&#xe82c;</i> <span class="i-name">icon-thumbs-down</span><span class="i-code">0xe82c</span></div>
-        <div title="Code: 0xe82d" class="the-icons span3"><i class="demo-icon icon-download">&#xe82d;</i> <span class="i-name">icon-download</span><span class="i-code">0xe82d</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe82e" class="the-icons span3"><i class="demo-icon icon-upload">&#xe82e;</i> <span class="i-name">icon-upload</span><span class="i-code">0xe82e</span></div>
-        <div title="Code: 0xe82f" class="the-icons span3"><i class="demo-icon icon-upload-cloud">&#xe82f;</i> <span class="i-name">icon-upload-cloud</span><span class="i-code">0xe82f</span></div>
-        <div title="Code: 0xe830" class="the-icons span3"><i class="demo-icon icon-reply">&#xe830;</i> <span class="i-name">icon-reply</span><span class="i-code">0xe830</span></div>
-        <div title="Code: 0xe831" class="the-icons span3"><i class="demo-icon icon-reply-all">&#xe831;</i> <span class="i-name">icon-reply-all</span><span class="i-code">0xe831</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe832" class="the-icons span3"><i class="demo-icon icon-forward">&#xe832;</i> <span class="i-name">icon-forward</span><span class="i-code">0xe832</span></div>
-        <div title="Code: 0xe833" class="the-icons span3"><i class="demo-icon icon-quote">&#xe833;</i> <span class="i-name">icon-quote</span><span class="i-code">0xe833</span></div>
-        <div title="Code: 0xe834" class="the-icons span3"><i class="demo-icon icon-code">&#xe834;</i> <span class="i-name">icon-code</span><span class="i-code">0xe834</span></div>
-        <div title="Code: 0xe835" class="the-icons span3"><i class="demo-icon icon-export">&#xe835;</i> <span class="i-name">icon-export</span><span class="i-code">0xe835</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe836" class="the-icons span3"><i class="demo-icon icon-pencil">&#xe836;</i> <span class="i-name">icon-pencil</span><span class="i-code">0xe836</span></div>
-        <div title="Code: 0xe837" class="the-icons span3"><i class="demo-icon icon-feather">&#xe837;</i> <span class="i-name">icon-feather</span><span class="i-code">0xe837</span></div>
-        <div title="Code: 0xe838" class="the-icons span3"><i class="demo-icon icon-print">&#xe838;</i> <span class="i-name">icon-print</span><span class="i-code">0xe838</span></div>
-        <div title="Code: 0xe839" class="the-icons span3"><i class="demo-icon icon-retweet">&#xe839;</i> <span class="i-name">icon-retweet</span><span class="i-code">0xe839</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe83a" class="the-icons span3"><i class="demo-icon icon-keyboard">&#xe83a;</i> <span class="i-name">icon-keyboard</span><span class="i-code">0xe83a</span></div>
-        <div title="Code: 0xe83b" class="the-icons span3"><i class="demo-icon icon-comment">&#xe83b;</i> <span class="i-name">icon-comment</span><span class="i-code">0xe83b</span></div>
-        <div title="Code: 0xe83c" class="the-icons span3"><i class="demo-icon icon-chat">&#xe83c;</i> <span class="i-name">icon-chat</span><span class="i-code">0xe83c</span></div>
-        <div title="Code: 0xe83d" class="the-icons span3"><i class="demo-icon icon-bell">&#xe83d;</i> <span class="i-name">icon-bell</span><span class="i-code">0xe83d</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe83e" class="the-icons span3"><i class="demo-icon icon-attention">&#xe83e;</i> <span class="i-name">icon-attention</span><span class="i-code">0xe83e</span></div>
-        <div title="Code: 0xe83f" class="the-icons span3"><i class="demo-icon icon-alert">&#xe83f;</i> <span class="i-name">icon-alert</span><span class="i-code">0xe83f</span></div>
-        <div title="Code: 0xe840" class="the-icons span3"><i class="demo-icon icon-vcard">&#xe840;</i> <span class="i-name">icon-vcard</span><span class="i-code">0xe840</span></div>
-        <div title="Code: 0xe841" class="the-icons span3"><i class="demo-icon icon-address">&#xe841;</i> <span class="i-name">icon-address</span><span class="i-code">0xe841</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe842" class="the-icons span3"><i class="demo-icon icon-location">&#xe842;</i> <span class="i-name">icon-location</span><span class="i-code">0xe842</span></div>
-        <div title="Code: 0xe843" class="the-icons span3"><i class="demo-icon icon-map">&#xe843;</i> <span class="i-name">icon-map</span><span class="i-code">0xe843</span></div>
-        <div title="Code: 0xe844" class="the-icons span3"><i class="demo-icon icon-direction">&#xe844;</i> <span class="i-name">icon-direction</span><span class="i-code">0xe844</span></div>
-        <div title="Code: 0xe845" class="the-icons span3"><i class="demo-icon icon-compass">&#xe845;</i> <span class="i-name">icon-compass</span><span class="i-code">0xe845</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe846" class="the-icons span3"><i class="demo-icon icon-cup">&#xe846;</i> <span class="i-name">icon-cup</span><span class="i-code">0xe846</span></div>
-        <div title="Code: 0xe847" class="the-icons span3"><i class="demo-icon icon-trash">&#xe847;</i> <span class="i-name">icon-trash</span><span class="i-code">0xe847</span></div>
-        <div title="Code: 0xe848" class="the-icons span3"><i class="demo-icon icon-doc">&#xe848;</i> <span class="i-name">icon-doc</span><span class="i-code">0xe848</span></div>
-        <div title="Code: 0xe849" class="the-icons span3"><i class="demo-icon icon-docs">&#xe849;</i> <span class="i-name">icon-docs</span><span class="i-code">0xe849</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe84a" class="the-icons span3"><i class="demo-icon icon-doc-landscape">&#xe84a;</i> <span class="i-name">icon-doc-landscape</span><span class="i-code">0xe84a</span></div>
-        <div title="Code: 0xe84b" class="the-icons span3"><i class="demo-icon icon-doc-text">&#xe84b;</i> <span class="i-name">icon-doc-text</span><span class="i-code">0xe84b</span></div>
-        <div title="Code: 0xe84c" class="the-icons span3"><i class="demo-icon icon-doc-text-inv">&#xe84c;</i> <span class="i-name">icon-doc-text-inv</span><span class="i-code">0xe84c</span></div>
-        <div title="Code: 0xe84d" class="the-icons span3"><i class="demo-icon icon-newspaper">&#xe84d;</i> <span class="i-name">icon-newspaper</span><span class="i-code">0xe84d</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe84e" class="the-icons span3"><i class="demo-icon icon-book-open">&#xe84e;</i> <span class="i-name">icon-book-open</span><span class="i-code">0xe84e</span></div>
-        <div title="Code: 0xe84f" class="the-icons span3"><i class="demo-icon icon-book">&#xe84f;</i> <span class="i-name">icon-book</span><span class="i-code">0xe84f</span></div>
-        <div title="Code: 0xe850" class="the-icons span3"><i class="demo-icon icon-folder">&#xe850;</i> <span class="i-name">icon-folder</span><span class="i-code">0xe850</span></div>
-        <div title="Code: 0xe851" class="the-icons span3"><i class="demo-icon icon-archive">&#xe851;</i> <span class="i-name">icon-archive</span><span class="i-code">0xe851</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe852" class="the-icons span3"><i class="demo-icon icon-box">&#xe852;</i> <span class="i-name">icon-box</span><span class="i-code">0xe852</span></div>
-        <div title="Code: 0xe853" class="the-icons span3"><i class="demo-icon icon-rss">&#xe853;</i> <span class="i-name">icon-rss</span><span class="i-code">0xe853</span></div>
-        <div title="Code: 0xe854" class="the-icons span3"><i class="demo-icon icon-phone">&#xe854;</i> <span class="i-name">icon-phone</span><span class="i-code">0xe854</span></div>
-        <div title="Code: 0xe855" class="the-icons span3"><i class="demo-icon icon-cog">&#xe855;</i> <span class="i-name">icon-cog</span><span class="i-code">0xe855</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe856" class="the-icons span3"><i class="demo-icon icon-tools">&#xe856;</i> <span class="i-name">icon-tools</span><span class="i-code">0xe856</span></div>
-        <div title="Code: 0xe857" class="the-icons span3"><i class="demo-icon icon-share">&#xe857;</i> <span class="i-name">icon-share</span><span class="i-code">0xe857</span></div>
-        <div title="Code: 0xe858" class="the-icons span3"><i class="demo-icon icon-shareable">&#xe858;</i> <span class="i-name">icon-shareable</span><span class="i-code">0xe858</span></div>
-        <div title="Code: 0xe859" class="the-icons span3"><i class="demo-icon icon-basket">&#xe859;</i> <span class="i-name">icon-basket</span><span class="i-code">0xe859</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe85a" class="the-icons span3"><i class="demo-icon icon-bag">&#xe85a;</i> <span class="i-name">icon-bag</span><span class="i-code">0xe85a</span></div>
-        <div title="Code: 0xe85b" class="the-icons span3"><i class="demo-icon icon-calendar">&#xe85b;</i> <span class="i-name">icon-calendar</span><span class="i-code">0xe85b</span></div>
-        <div title="Code: 0xe85c" class="the-icons span3"><i class="demo-icon icon-login">&#xe85c;</i> <span class="i-name">icon-login</span><span class="i-code">0xe85c</span></div>
-        <div title="Code: 0xe85d" class="the-icons span3"><i class="demo-icon icon-logout">&#xe85d;</i> <span class="i-name">icon-logout</span><span class="i-code">0xe85d</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe85e" class="the-icons span3"><i class="demo-icon icon-mic">&#xe85e;</i> <span class="i-name">icon-mic</span><span class="i-code">0xe85e</span></div>
-        <div title="Code: 0xe85f" class="the-icons span3"><i class="demo-icon icon-mute">&#xe85f;</i> <span class="i-name">icon-mute</span><span class="i-code">0xe85f</span></div>
-        <div title="Code: 0xe860" class="the-icons span3"><i class="demo-icon icon-sound">&#xe860;</i> <span class="i-name">icon-sound</span><span class="i-code">0xe860</span></div>
-        <div title="Code: 0xe861" class="the-icons span3"><i class="demo-icon icon-volume">&#xe861;</i> <span class="i-name">icon-volume</span><span class="i-code">0xe861</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe862" class="the-icons span3"><i class="demo-icon icon-clock">&#xe862;</i> <span class="i-name">icon-clock</span><span class="i-code">0xe862</span></div>
-        <div title="Code: 0xe863" class="the-icons span3"><i class="demo-icon icon-hourglass">&#xe863;</i> <span class="i-name">icon-hourglass</span><span class="i-code">0xe863</span></div>
-        <div title="Code: 0xe864" class="the-icons span3"><i class="demo-icon icon-lamp">&#xe864;</i> <span class="i-name">icon-lamp</span><span class="i-code">0xe864</span></div>
-        <div title="Code: 0xe865" class="the-icons span3"><i class="demo-icon icon-light-down">&#xe865;</i> <span class="i-name">icon-light-down</span><span class="i-code">0xe865</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe866" class="the-icons span3"><i class="demo-icon icon-light-up">&#xe866;</i> <span class="i-name">icon-light-up</span><span class="i-code">0xe866</span></div>
-        <div title="Code: 0xe867" class="the-icons span3"><i class="demo-icon icon-adjust">&#xe867;</i> <span class="i-name">icon-adjust</span><span class="i-code">0xe867</span></div>
-        <div title="Code: 0xe868" class="the-icons span3"><i class="demo-icon icon-block">&#xe868;</i> <span class="i-name">icon-block</span><span class="i-code">0xe868</span></div>
-        <div title="Code: 0xe869" class="the-icons span3"><i class="demo-icon icon-resize-full">&#xe869;</i> <span class="i-name">icon-resize-full</span><span class="i-code">0xe869</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe86a" class="the-icons span3"><i class="demo-icon icon-resize-small">&#xe86a;</i> <span class="i-name">icon-resize-small</span><span class="i-code">0xe86a</span></div>
-        <div title="Code: 0xe86b" class="the-icons span3"><i class="demo-icon icon-popup">&#xe86b;</i> <span class="i-name">icon-popup</span><span class="i-code">0xe86b</span></div>
-        <div title="Code: 0xe86c" class="the-icons span3"><i class="demo-icon icon-publish">&#xe86c;</i> <span class="i-name">icon-publish</span><span class="i-code">0xe86c</span></div>
-        <div title="Code: 0xe86d" class="the-icons span3"><i class="demo-icon icon-window">&#xe86d;</i> <span class="i-name">icon-window</span><span class="i-code">0xe86d</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe86e" class="the-icons span3"><i class="demo-icon icon-arrow-combo">&#xe86e;</i> <span class="i-name">icon-arrow-combo</span><span class="i-code">0xe86e</span></div>
-        <div title="Code: 0xe86f" class="the-icons span3"><i class="demo-icon icon-down-circled">&#xe86f;</i> <span class="i-name">icon-down-circled</span><span class="i-code">0xe86f</span></div>
-        <div title="Code: 0xe870" class="the-icons span3"><i class="demo-icon icon-left-circled">&#xe870;</i> <span class="i-name">icon-left-circled</span><span class="i-code">0xe870</span></div>
-        <div title="Code: 0xe871" class="the-icons span3"><i class="demo-icon icon-right-circled">&#xe871;</i> <span class="i-name">icon-right-circled</span><span class="i-code">0xe871</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe872" class="the-icons span3"><i class="demo-icon icon-up-circled">&#xe872;</i> <span class="i-name">icon-up-circled</span><span class="i-code">0xe872</span></div>
-        <div title="Code: 0xe873" class="the-icons span3"><i class="demo-icon icon-down-open">&#xe873;</i> <span class="i-name">icon-down-open</span><span class="i-code">0xe873</span></div>
-        <div title="Code: 0xe874" class="the-icons span3"><i class="demo-icon icon-left-open">&#xe874;</i> <span class="i-name">icon-left-open</span><span class="i-code">0xe874</span></div>
-        <div title="Code: 0xe875" class="the-icons span3"><i class="demo-icon icon-right-open">&#xe875;</i> <span class="i-name">icon-right-open</span><span class="i-code">0xe875</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe876" class="the-icons span3"><i class="demo-icon icon-up-open">&#xe876;</i> <span class="i-name">icon-up-open</span><span class="i-code">0xe876</span></div>
-        <div title="Code: 0xe877" class="the-icons span3"><i class="demo-icon icon-down-open-mini">&#xe877;</i> <span class="i-name">icon-down-open-mini</span><span class="i-code">0xe877</span></div>
-        <div title="Code: 0xe878" class="the-icons span3"><i class="demo-icon icon-left-open-mini">&#xe878;</i> <span class="i-name">icon-left-open-mini</span><span class="i-code">0xe878</span></div>
-        <div title="Code: 0xe879" class="the-icons span3"><i class="demo-icon icon-right-open-mini">&#xe879;</i> <span class="i-name">icon-right-open-mini</span><span class="i-code">0xe879</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe87a" class="the-icons span3"><i class="demo-icon icon-up-open-mini">&#xe87a;</i> <span class="i-name">icon-up-open-mini</span><span class="i-code">0xe87a</span></div>
-        <div title="Code: 0xe87b" class="the-icons span3"><i class="demo-icon icon-down-open-big">&#xe87b;</i> <span class="i-name">icon-down-open-big</span><span class="i-code">0xe87b</span></div>
-        <div title="Code: 0xe87c" class="the-icons span3"><i class="demo-icon icon-left-open-big">&#xe87c;</i> <span class="i-name">icon-left-open-big</span><span class="i-code">0xe87c</span></div>
-        <div title="Code: 0xe87d" class="the-icons span3"><i class="demo-icon icon-right-open-big">&#xe87d;</i> <span class="i-name">icon-right-open-big</span><span class="i-code">0xe87d</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe87e" class="the-icons span3"><i class="demo-icon icon-up-open-big">&#xe87e;</i> <span class="i-name">icon-up-open-big</span><span class="i-code">0xe87e</span></div>
-        <div title="Code: 0xe87f" class="the-icons span3"><i class="demo-icon icon-down">&#xe87f;</i> <span class="i-name">icon-down</span><span class="i-code">0xe87f</span></div>
-        <div title="Code: 0xe880" class="the-icons span3"><i class="demo-icon icon-left">&#xe880;</i> <span class="i-name">icon-left</span><span class="i-code">0xe880</span></div>
-        <div title="Code: 0xe881" class="the-icons span3"><i class="demo-icon icon-right">&#xe881;</i> <span class="i-name">icon-right</span><span class="i-code">0xe881</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe882" class="the-icons span3"><i class="demo-icon icon-up">&#xe882;</i> <span class="i-name">icon-up</span><span class="i-code">0xe882</span></div>
-        <div title="Code: 0xe883" class="the-icons span3"><i class="demo-icon icon-down-dir">&#xe883;</i> <span class="i-name">icon-down-dir</span><span class="i-code">0xe883</span></div>
-        <div title="Code: 0xe884" class="the-icons span3"><i class="demo-icon icon-left-dir">&#xe884;</i> <span class="i-name">icon-left-dir</span><span class="i-code">0xe884</span></div>
-        <div title="Code: 0xe885" class="the-icons span3"><i class="demo-icon icon-right-dir">&#xe885;</i> <span class="i-name">icon-right-dir</span><span class="i-code">0xe885</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe886" class="the-icons span3"><i class="demo-icon icon-up-dir">&#xe886;</i> <span class="i-name">icon-up-dir</span><span class="i-code">0xe886</span></div>
-        <div title="Code: 0xe887" class="the-icons span3"><i class="demo-icon icon-down-bold">&#xe887;</i> <span class="i-name">icon-down-bold</span><span class="i-code">0xe887</span></div>
-        <div title="Code: 0xe888" class="the-icons span3"><i class="demo-icon icon-left-bold">&#xe888;</i> <span class="i-name">icon-left-bold</span><span class="i-code">0xe888</span></div>
-        <div title="Code: 0xe889" class="the-icons span3"><i class="demo-icon icon-right-bold">&#xe889;</i> <span class="i-name">icon-right-bold</span><span class="i-code">0xe889</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe88a" class="the-icons span3"><i class="demo-icon icon-up-bold">&#xe88a;</i> <span class="i-name">icon-up-bold</span><span class="i-code">0xe88a</span></div>
-        <div title="Code: 0xe88b" class="the-icons span3"><i class="demo-icon icon-down-thin">&#xe88b;</i> <span class="i-name">icon-down-thin</span><span class="i-code">0xe88b</span></div>
-        <div title="Code: 0xe88c" class="the-icons span3"><i class="demo-icon icon-left-thin">&#xe88c;</i> <span class="i-name">icon-left-thin</span><span class="i-code">0xe88c</span></div>
-        <div title="Code: 0xe88d" class="the-icons span3"><i class="demo-icon icon-right-thin">&#xe88d;</i> <span class="i-name">icon-right-thin</span><span class="i-code">0xe88d</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe88e" class="the-icons span3"><i class="demo-icon icon-up-thin">&#xe88e;</i> <span class="i-name">icon-up-thin</span><span class="i-code">0xe88e</span></div>
-        <div title="Code: 0xe88f" class="the-icons span3"><i class="demo-icon icon-ccw">&#xe88f;</i> <span class="i-name">icon-ccw</span><span class="i-code">0xe88f</span></div>
-        <div title="Code: 0xe890" class="the-icons span3"><i class="demo-icon icon-cw">&#xe890;</i> <span class="i-name">icon-cw</span><span class="i-code">0xe890</span></div>
-        <div title="Code: 0xe891" class="the-icons span3"><i class="demo-icon icon-arrows-ccw">&#xe891;</i> <span class="i-name">icon-arrows-ccw</span><span class="i-code">0xe891</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe892" class="the-icons span3"><i class="demo-icon icon-level-down">&#xe892;</i> <span class="i-name">icon-level-down</span><span class="i-code">0xe892</span></div>
-        <div title="Code: 0xe893" class="the-icons span3"><i class="demo-icon icon-level-up">&#xe893;</i> <span class="i-name">icon-level-up</span><span class="i-code">0xe893</span></div>
-        <div title="Code: 0xe894" class="the-icons span3"><i class="demo-icon icon-shuffle">&#xe894;</i> <span class="i-name">icon-shuffle</span><span class="i-code">0xe894</span></div>
-        <div title="Code: 0xe895" class="the-icons span3"><i class="demo-icon icon-loop">&#xe895;</i> <span class="i-name">icon-loop</span><span class="i-code">0xe895</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe896" class="the-icons span3"><i class="demo-icon icon-switch">&#xe896;</i> <span class="i-name">icon-switch</span><span class="i-code">0xe896</span></div>
-        <div title="Code: 0xe897" class="the-icons span3"><i class="demo-icon icon-play">&#xe897;</i> <span class="i-name">icon-play</span><span class="i-code">0xe897</span></div>
-        <div title="Code: 0xe898" class="the-icons span3"><i class="demo-icon icon-stop">&#xe898;</i> <span class="i-name">icon-stop</span><span class="i-code">0xe898</span></div>
-        <div title="Code: 0xe899" class="the-icons span3"><i class="demo-icon icon-pause">&#xe899;</i> <span class="i-name">icon-pause</span><span class="i-code">0xe899</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe89a" class="the-icons span3"><i class="demo-icon icon-record">&#xe89a;</i> <span class="i-name">icon-record</span><span class="i-code">0xe89a</span></div>
-        <div title="Code: 0xe89b" class="the-icons span3"><i class="demo-icon icon-to-end">&#xe89b;</i> <span class="i-name">icon-to-end</span><span class="i-code">0xe89b</span></div>
-        <div title="Code: 0xe89c" class="the-icons span3"><i class="demo-icon icon-to-start">&#xe89c;</i> <span class="i-name">icon-to-start</span><span class="i-code">0xe89c</span></div>
-        <div title="Code: 0xe89d" class="the-icons span3"><i class="demo-icon icon-fast-forward">&#xe89d;</i> <span class="i-name">icon-fast-forward</span><span class="i-code">0xe89d</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe89e" class="the-icons span3"><i class="demo-icon icon-fast-backward">&#xe89e;</i> <span class="i-name">icon-fast-backward</span><span class="i-code">0xe89e</span></div>
-        <div title="Code: 0xe89f" class="the-icons span3"><i class="demo-icon icon-progress-0">&#xe89f;</i> <span class="i-name">icon-progress-0</span><span class="i-code">0xe89f</span></div>
-        <div title="Code: 0xe8a0" class="the-icons span3"><i class="demo-icon icon-progress-1">&#xe8a0;</i> <span class="i-name">icon-progress-1</span><span class="i-code">0xe8a0</span></div>
-        <div title="Code: 0xe8a1" class="the-icons span3"><i class="demo-icon icon-progress-2">&#xe8a1;</i> <span class="i-name">icon-progress-2</span><span class="i-code">0xe8a1</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe8a2" class="the-icons span3"><i class="demo-icon icon-progress-3">&#xe8a2;</i> <span class="i-name">icon-progress-3</span><span class="i-code">0xe8a2</span></div>
-        <div title="Code: 0xe8a3" class="the-icons span3"><i class="demo-icon icon-target">&#xe8a3;</i> <span class="i-name">icon-target</span><span class="i-code">0xe8a3</span></div>
-        <div title="Code: 0xe8a5" class="the-icons span3"><i class="demo-icon icon-list">&#xe8a5;</i> <span class="i-name">icon-list</span><span class="i-code">0xe8a5</span></div>
-        <div title="Code: 0xe8a6" class="the-icons span3"><i class="demo-icon icon-list-add">&#xe8a6;</i> <span class="i-name">icon-list-add</span><span class="i-code">0xe8a6</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe8a9" class="the-icons span3"><i class="demo-icon icon-battery">&#xe8a9;</i> <span class="i-name">icon-battery</span><span class="i-code">0xe8a9</span></div>
-        <div title="Code: 0xe8aa" class="the-icons span3"><i class="demo-icon icon-back-in-time">&#xe8aa;</i> <span class="i-name">icon-back-in-time</span><span class="i-code">0xe8aa</span></div>
-        <div title="Code: 0xe8ab" class="the-icons span3"><i class="demo-icon icon-monitor">&#xe8ab;</i> <span class="i-name">icon-monitor</span><span class="i-code">0xe8ab</span></div>
-        <div title="Code: 0xe8ac" class="the-icons span3"><i class="demo-icon icon-mobile">&#xe8ac;</i> <span class="i-name">icon-mobile</span><span class="i-code">0xe8ac</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe8ae" class="the-icons span3"><i class="demo-icon icon-cd">&#xe8ae;</i> <span class="i-name">icon-cd</span><span class="i-code">0xe8ae</span></div>
-        <div title="Code: 0xe8af" class="the-icons span3"><i class="demo-icon icon-inbox">&#xe8af;</i> <span class="i-name">icon-inbox</span><span class="i-code">0xe8af</span></div>
-        <div title="Code: 0xe8b0" class="the-icons span3"><i class="demo-icon icon-install">&#xe8b0;</i> <span class="i-name">icon-install</span><span class="i-code">0xe8b0</span></div>
-        <div title="Code: 0xe8b1" class="the-icons span3"><i class="demo-icon icon-globe">&#xe8b1;</i> <span class="i-name">icon-globe</span><span class="i-code">0xe8b1</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe8b2" class="the-icons span3"><i class="demo-icon icon-cloud">&#xe8b2;</i> <span class="i-name">icon-cloud</span><span class="i-code">0xe8b2</span></div>
-        <div title="Code: 0xe8b3" class="the-icons span3"><i class="demo-icon icon-cloud-thunder">&#xe8b3;</i> <span class="i-name">icon-cloud-thunder</span><span class="i-code">0xe8b3</span></div>
-        <div title="Code: 0xe8b4" class="the-icons span3"><i class="demo-icon icon-flash">&#xe8b4;</i> <span class="i-name">icon-flash</span><span class="i-code">0xe8b4</span></div>
-        <div title="Code: 0xe8b5" class="the-icons span3"><i class="demo-icon icon-moon">&#xe8b5;</i> <span class="i-name">icon-moon</span><span class="i-code">0xe8b5</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe8b6" class="the-icons span3"><i class="demo-icon icon-flight">&#xe8b6;</i> <span class="i-name">icon-flight</span><span class="i-code">0xe8b6</span></div>
-        <div title="Code: 0xe8b7" class="the-icons span3"><i class="demo-icon icon-paper-plane">&#xe8b7;</i> <span class="i-name">icon-paper-plane</span><span class="i-code">0xe8b7</span></div>
-        <div title="Code: 0xe8b8" class="the-icons span3"><i class="demo-icon icon-leaf">&#xe8b8;</i> <span class="i-name">icon-leaf</span><span class="i-code">0xe8b8</span></div>
-        <div title="Code: 0xe8b9" class="the-icons span3"><i class="demo-icon icon-lifebuoy">&#xe8b9;</i> <span class="i-name">icon-lifebuoy</span><span class="i-code">0xe8b9</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe8ba" class="the-icons span3"><i class="demo-icon icon-mouse">&#xe8ba;</i> <span class="i-name">icon-mouse</span><span class="i-code">0xe8ba</span></div>
-        <div title="Code: 0xe8bb" class="the-icons span3"><i class="demo-icon icon-briefcase">&#xe8bb;</i> <span class="i-name">icon-briefcase</span><span class="i-code">0xe8bb</span></div>
-        <div title="Code: 0xe8bc" class="the-icons span3"><i class="demo-icon icon-suitcase">&#xe8bc;</i> <span class="i-name">icon-suitcase</span><span class="i-code">0xe8bc</span></div>
-        <div title="Code: 0xe8bd" class="the-icons span3"><i class="demo-icon icon-dot">&#xe8bd;</i> <span class="i-name">icon-dot</span><span class="i-code">0xe8bd</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe8be" class="the-icons span3"><i class="demo-icon icon-dot-2">&#xe8be;</i> <span class="i-name">icon-dot-2</span><span class="i-code">0xe8be</span></div>
-        <div title="Code: 0xe8bf" class="the-icons span3"><i class="demo-icon icon-dot-3">&#xe8bf;</i> <span class="i-name">icon-dot-3</span><span class="i-code">0xe8bf</span></div>
-        <div title="Code: 0xe8c0" class="the-icons span3"><i class="demo-icon icon-brush">&#xe8c0;</i> <span class="i-name">icon-brush</span><span class="i-code">0xe8c0</span></div>
-        <div title="Code: 0xe8c2" class="the-icons span3"><i class="demo-icon icon-infinity">&#xe8c2;</i> <span class="i-name">icon-infinity</span><span class="i-code">0xe8c2</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe8c3" class="the-icons span3"><i class="demo-icon icon-erase">&#xe8c3;</i> <span class="i-name">icon-erase</span><span class="i-code">0xe8c3</span></div>
-        <div title="Code: 0xe8c4" class="the-icons span3"><i class="demo-icon icon-chart-pie">&#xe8c4;</i> <span class="i-name">icon-chart-pie</span><span class="i-code">0xe8c4</span></div>
-        <div title="Code: 0xe8c5" class="the-icons span3"><i class="demo-icon icon-chart-line">&#xe8c5;</i> <span class="i-name">icon-chart-line</span><span class="i-code">0xe8c5</span></div>
-        <div title="Code: 0xe8c6" class="the-icons span3"><i class="demo-icon icon-chart-bar">&#xe8c6;</i> <span class="i-name">icon-chart-bar</span><span class="i-code">0xe8c6</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe8c7" class="the-icons span3"><i class="demo-icon icon-chart-area">&#xe8c7;</i> <span class="i-name">icon-chart-area</span><span class="i-code">0xe8c7</span></div>
-        <div title="Code: 0xe8c8" class="the-icons span3"><i class="demo-icon icon-tape">&#xe8c8;</i> <span class="i-name">icon-tape</span><span class="i-code">0xe8c8</span></div>
-        <div title="Code: 0xe8c9" class="the-icons span3"><i class="demo-icon icon-graduation-cap">&#xe8c9;</i> <span class="i-name">icon-graduation-cap</span><span class="i-code">0xe8c9</span></div>
-        <div title="Code: 0xe8ca" class="the-icons span3"><i class="demo-icon icon-language">&#xe8ca;</i> <span class="i-name">icon-language</span><span class="i-code">0xe8ca</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe8cb" class="the-icons span3"><i class="demo-icon icon-ticket">&#xe8cb;</i> <span class="i-name">icon-ticket</span><span class="i-code">0xe8cb</span></div>
-        <div title="Code: 0xe8cc" class="the-icons span3"><i class="demo-icon icon-water">&#xe8cc;</i> <span class="i-name">icon-water</span><span class="i-code">0xe8cc</span></div>
-        <div title="Code: 0xe8cd" class="the-icons span3"><i class="demo-icon icon-droplet">&#xe8cd;</i> <span class="i-name">icon-droplet</span><span class="i-code">0xe8cd</span></div>
-        <div title="Code: 0xe8ce" class="the-icons span3"><i class="demo-icon icon-air">&#xe8ce;</i> <span class="i-name">icon-air</span><span class="i-code">0xe8ce</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe8cf" class="the-icons span3"><i class="demo-icon icon-credit-card">&#xe8cf;</i> <span class="i-name">icon-credit-card</span><span class="i-code">0xe8cf</span></div>
-        <div title="Code: 0xe8d0" class="the-icons span3"><i class="demo-icon icon-floppy">&#xe8d0;</i> <span class="i-name">icon-floppy</span><span class="i-code">0xe8d0</span></div>
-        <div title="Code: 0xe8d1" class="the-icons span3"><i class="demo-icon icon-clipboard">&#xe8d1;</i> <span class="i-name">icon-clipboard</span><span class="i-code">0xe8d1</span></div>
-        <div title="Code: 0xe8d2" class="the-icons span3"><i class="demo-icon icon-megaphone">&#xe8d2;</i> <span class="i-name">icon-megaphone</span><span class="i-code">0xe8d2</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe8d3" class="the-icons span3"><i class="demo-icon icon-database">&#xe8d3;</i> <span class="i-name">icon-database</span><span class="i-code">0xe8d3</span></div>
-        <div title="Code: 0xe8d4" class="the-icons span3"><i class="demo-icon icon-drive">&#xe8d4;</i> <span class="i-name">icon-drive</span><span class="i-code">0xe8d4</span></div>
-        <div title="Code: 0xe8d5" class="the-icons span3"><i class="demo-icon icon-bucket">&#xe8d5;</i> <span class="i-name">icon-bucket</span><span class="i-code">0xe8d5</span></div>
-        <div title="Code: 0xe8d6" class="the-icons span3"><i class="demo-icon icon-thermometer">&#xe8d6;</i> <span class="i-name">icon-thermometer</span><span class="i-code">0xe8d6</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe8d7" class="the-icons span3"><i class="demo-icon icon-key">&#xe8d7;</i> <span class="i-name">icon-key</span><span class="i-code">0xe8d7</span></div>
-        <div title="Code: 0xe8d8" class="the-icons span3"><i class="demo-icon icon-flow-cascade">&#xe8d8;</i> <span class="i-name">icon-flow-cascade</span><span class="i-code">0xe8d8</span></div>
-        <div title="Code: 0xe8d9" class="the-icons span3"><i class="demo-icon icon-flow-branch">&#xe8d9;</i> <span class="i-name">icon-flow-branch</span><span class="i-code">0xe8d9</span></div>
-        <div title="Code: 0xe8da" class="the-icons span3"><i class="demo-icon icon-flow-tree">&#xe8da;</i> <span class="i-name">icon-flow-tree</span><span class="i-code">0xe8da</span></div>
-      </div>
-      <div class="row">
-        <div title="Code: 0xe8db" class="the-icons span3"><i class="demo-icon icon-flow-line">&#xe8db;</i> <span class="i-name">icon-flow-line</span><span class="i-code">0xe8db</span></div>
-        <div title="Code: 0xe8dc" class="the-icons span3"><i class="demo-icon icon-flow-parallel">&#xe8dc;</i> <span class="i-name">icon-flow-parallel</span><span class="i-code">0xe8dc</span></div>
-        <div title="Code: 0xe8dd" class="the-icons span3"><i class="demo-icon icon-rocket">&#xe8dd;</i> <span class="i-name">icon-rocket</span><span class="i-code">0xe8dd</span></div>
-        <div title="Code: 0xe8de" class="the-icons span3"><i class="demo-icon icon-gauge">&#xe8de;</i> <span class="i-name">icon-gauge</span><span class="i-code">0xe8de</span></div>
-      </div>
-    </div>
-    <div class="container footer">Generated by <a href="http://fontello.com">fontello.com</a></div>
-  </body>
-</html>

src/mol-plugin-ui/skin/fonts/fontello.svg

@@ -1,442 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Copyright (C) 2016 by original authors @ fontello.com</metadata>
-<defs>
-<font id="fontello" horiz-adv-x="1000" >
-<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
-<missing-glyph horiz-adv-x="1000" />
-<glyph glyph-name="palette" unicode="&#xe800;" d="M857 622q72-48 101-110t20-104-35-48q-16-4-54 10t-80 10-80-46q-30-46-21-75t34-65 23-50q-2-26-36-63t-126-74-216-37q-186 0-291 101t-95 245q8 118 104 235t216 151q290 84 536-80z m-318-466q30 0 52 22t22 54-22 53-52 21q-32 0-54-21t-22-53 22-54 54-22z" horiz-adv-x="980" />
-
-<glyph glyph-name="search" unicode="&#xe803;" d="M772 78q30-34 6-62l-46-46q-36-32-68 0l-190 190q-74-42-156-42-128 0-223 95t-95 223 90 219 218 91 224-95 96-223q0-88-46-162z m-678 358q0-88 68-156t156-68 151 63 63 153q0 88-68 155t-156 67-151-63-63-151z" horiz-adv-x="789" />
-
-<glyph glyph-name="flashlight" unicode="&#xe804;" d="M807 706q62-62 85-130t-5-92l-134-134q-16-16-62-26t-96-4l-408-408q-18-18-57-6t-75 50q-36 36-49 74t5 56l408 408q-6 50 4 96t26 62l136 136q24 28 92 4t130-86z m-448-408q32-32 80 14 46 46 14 82-14 14-38 10t-44-24-23-43 11-39z m336 298q30-30 68-50t62-25 28-1q2 4-4 27t-26 60-50 67-66 50-59 26-27 2 1-28 25-62 48-66z" horiz-adv-x="902" />
-
-<glyph glyph-name="mail" unicode="&#xe805;" d="M30 586q-32 18-28 40 2 14 26 14l846 0q38 0 20-32-8-14-24-22-14-6-192-102t-182-98q-16-10-46-10-28 0-46 10-4 2-182 98t-192 102z m850-100q20 10 20-10l0-368q0-16-17-32t-33-16l-800 0q-16 0-33 16t-17 32l0 368q0 20 20 10l384-200q18-10 46-10t46 10z" horiz-adv-x="900" />
-
-<glyph glyph-name="heart" unicode="&#xe806;" d="M790 644q70-64 70-156t-70-158l-360-330-360 330q-70 66-70 158t70 156q62 58 151 58t153-58l56-52 58 52q62 58 150 58t152-58z" horiz-adv-x="860" />
-
-<glyph glyph-name="heart-empty" unicode="&#xe807;" d="M790 642q70-64 70-156t-70-156l-360-330-360 330q-70 64-70 156t70 156q64 58 152 58t150-58l58-52 56 52q64 58 152 58t152-58z m-54-260q42 40 42 104 0 66-38 100-38 38-102 38-52 0-104-48l-104-92-106 92q-48 48-102 48-64 0-104-38-38-36-38-100 0-66 44-104l306-286z" horiz-adv-x="860" />
-
-<glyph glyph-name="star" unicode="&#xe808;" d="M440 790l120-336 320 0-262-196 94-348-272 208-272-208 94 348-262 196 320 0z" horiz-adv-x="880" />
-
-<glyph glyph-name="star-empty" unicode="&#xe809;" d="M880 454l-262-196 94-348-272 208-272-208 94 348-262 196 320 0 120 336 120-336 320 0z m-440-238l150-124-62 178 144 114-176-4-56 202-54-202-176 4 142-114-62-178z" horiz-adv-x="880" />
-
-<glyph glyph-name="user" unicode="&#xe80a;" d="M736 128q204-72 204-122l0-106-940 0 0 106q0 50 204 122 94 34 128 69t34 95q0 22-22 49t-32 73q-2 12-9 18t-14 8-14 17-9 43q0 16 5 26t9 12l4 4q-8 50-12 88-4 54 41 112t157 58 158-58 40-112l-12-88q18-8 18-42-2-28-9-43t-14-17-14-8-9-18q-8-48-31-74t-23-48q0-60 35-95t127-69z" horiz-adv-x="940" />
-
-<glyph glyph-name="users" unicode="&#xe80b;" d="M1000-90l-224 0 0 150q0 54-30 81t-154 89q40 30 40 84 0 16-13 33t-19 51q-2 8-14 16t-14 42q0 24 12 30-6 34-8 60-4 38 23 78t95 40 96-40 24-78l-8-60q12-6 12-30-2-34-14-42t-14-16q-6-34-19-51t-13-33q0-42 21-66t77-48q112-46 130-80 6-8 9-61t5-101l0-48z m-488 262q182-78 182-124l0-138-694 0 0 184q0 44 84 78 76 32 104 64t28 88q0 20-19 44t-25 68q-2 10-18 22t-20 56q0 14 3 23t7 13l4 2q-6 46-10 82-4 50 33 103t127 53 127-53 33-103l-10-82q14-8 14-38-4-44-20-56t-18-22q-6-44-25-68t-19-44q0-56 28-88t104-64z" horiz-adv-x="1000" />
-
-<glyph glyph-name="user-add" unicode="&#xe80c;" d="M620 128q180-64 180-122l0-106-800 0 0 202q36 14 82 26 94 34 129 69t35 95q0 22-23 48t-31 74q-2 12-23 25t-25 61q0 16 5 26t9 12l4 4q-8 50-12 88-6 54 40 112t160 58 160-58 42-112l-14-88q18-8 18-42-2-28-9-43t-14-17-14-8-9-18q-10-46-33-73t-23-49q0-60 36-95t130-69z m230 272l150 0 0-100-150 0 0-150-100 0 0 150-150 0 0 100 150 0 0 150 100 0 0-150z" horiz-adv-x="1000" />
-
-<glyph glyph-name="video" unicode="&#xe80d;" d="M980 600l-100 0 0-100 100 0 0-100-100 0 0-100 100 0 0-100-100 0 0-100 100 0 0-60q0-16-12-28t-28-12l-900 0q-16 0-28 12t-12 28l0 60 100 0 0 100-100 0 0 100 100 0 0 100-100 0 0 100 100 0 0 100-100 0 0 60q0 18 12 29t28 11l900 0q16 0 28-11t12-29l0-60z m-600-400l250 150-250 150 0-300z" horiz-adv-x="980" />
-
-<glyph glyph-name="picture" unicode="&#xe80e;" d="M856 518l-100 0-124 150-214-150-180 0q-52 0-90-39t-38-91l0-160-108 296q-10 38 22 52l680 248q36 10 50-24z m106-90q16 0 27-12t11-28l0-472q0-16-11-28t-27-12l-724 0q-16 0-27 12t-11 28l0 472q0 16 11 28t27 12l724 0z m-56-452l0 162-72 160-166-60-130-132-138 170-92-214 0-86 598 0z" horiz-adv-x="1000" />
-
-<glyph glyph-name="camera" unicode="&#xe80f;" d="M500 450q64 0 107-44t43-106-44-106-106-44-106 44-44 106 44 106 106 44z m400 150q42 0 71-29t29-71l0-450q0-40-29-70t-71-30l-800 0q-40 0-70 30t-30 70l0 450q0 42 30 71t70 29l120 0q28 0 40 30l30 92q10 28 40 28l340 0q30 0 40-28l30-92q12-30 40-30l120 0z m-400-550q104 0 177 73t73 177-73 177-177 73-177-73-73-177 73-177 177-73z m366 380q14 0 24 11t10 25-10 24-24 10q-36 0-36-34 0-16 11-26t25-10z" horiz-adv-x="1000" />
-
-<glyph glyph-name="layout" unicode="&#xe810;" d="M170 650q80 0 80-80l0-90q0-80-80-80l-90 0q-80 0-80 80l0 90q0 80 80 80l90 0z m350 0q80 0 80-80l0-90q0-80-80-80l-90 0q-80 0-80 80l0 90q0 80 80 80l90 0z m-350-350q80 0 80-80l0-90q0-80-80-80l-90 0q-80 0-80 80l0 90q0 80 80 80l90 0z m350 0q80 0 80-80l0-90q0-80-80-80l-90 0q-80 0-80 80l0 90q0 80 80 80l90 0z" horiz-adv-x="600" />
-
-<glyph glyph-name="menu" unicode="&#xe811;" d="M650 400q22 0 36-15t14-35-15-35-35-15l-600 0q-20 0-35 15t-15 35 14 35 36 15l600 0z m-600 100q-20 0-35 15t-15 35 14 35 36 15l600 0q22 0 36-15t14-35-15-35-35-15l-600 0z m600-300q22 0 36-15t14-35-15-35-35-15l-600 0q-20 0-35 15t-15 35 14 35 36 15l600 0z" horiz-adv-x="700" />
-
-<glyph glyph-name="check" unicode="&#xe812;" d="M249 0q-34 0-56 28l-180 236q-16 24-12 52t26 46 51 14 47-28l118-154 296 474q16 24 43 30t53-8q24-16 30-43t-8-53l-350-560q-20-32-56-32z" horiz-adv-x="667" />
-
-<glyph glyph-name="cancel" unicode="&#xe813;" d="M452 194q18-18 18-43t-18-43q-18-16-43-16t-43 16l-132 152-132-152q-18-16-43-16t-43 16q-16 18-16 43t16 43l138 156-138 158q-16 18-16 43t16 43q18 16 43 16t43-16l132-152 132 152q18 16 43 16t43-16q18-18 18-43t-18-43l-138-158z" horiz-adv-x="470" />
-
-<glyph glyph-name="cancel-circled" unicode="&#xe814;" d="M420 770q174 0 297-123t123-297-123-297-297-123-297 123-123 297 123 297 297 123z m86-420l154 154-86 86-154-152-152 152-88-86 154-154-154-152 88-86 152 152 154-152 86 86z" horiz-adv-x="840" />
-
-<glyph glyph-name="cancel-squared" unicode="&#xe815;" d="M700 750q42 0 71-29t29-71l0-600q0-40-29-70t-71-30l-600 0q-40 0-70 30t-30 70l0 600q0 42 30 71t70 29l600 0z m-146-638l86 86-154 152 154 154-86 86-154-152-152 152-88-86 154-154-154-152 88-86 152 152z" horiz-adv-x="800" />
-
-<glyph glyph-name="plus" unicode="&#xe816;" d="M550 400q30 0 30-50t-30-50l-210 0 0-210q0-30-50-30t-50 30l0 210-210 0q-30 0-30 50t30 50l210 0 0 210q0 30 50 30t50-30l0-210 210 0z" horiz-adv-x="580" />
-
-<glyph glyph-name="plus-circled" unicode="&#xe817;" d="M420 770q174 0 297-123t123-297-123-297-297-123-297 123-123 297 123 297 297 123z m52-470l200 0 0 102-200 0 0 202-102 0 0-202-202 0 0-102 202 0 0-202 102 0 0 202z" horiz-adv-x="840" />
-
-<glyph glyph-name="plus-squared" unicode="&#xe818;" d="M700 750q42 0 71-29t29-71l0-600q0-40-29-70t-71-30l-600 0q-40 0-70 30t-30 70l0 600q0 42 30 71t70 29l600 0z m-50-450l0 100-200 0 0 200-100 0 0-200-200 0 0-100 200 0 0-200 100 0 0 200 200 0z" horiz-adv-x="800" />
-
-<glyph glyph-name="minus" unicode="&#xe819;" d="M550 400q30 0 30-50t-30-50l-520 0q-30 0-30 50t30 50l520 0z" horiz-adv-x="580" />
-
-<glyph glyph-name="minus-circled" unicode="&#xe81a;" d="M420 770q174 0 297-123t123-297-123-297-297-123-297 123-123 297 123 297 297 123z m252-368l-504 0 0-102 504 0 0 102z" horiz-adv-x="840" />
-
-<glyph glyph-name="minus-squared" unicode="&#xe81b;" d="M700 750q42 0 71-29t29-71l0-600q0-40-29-70t-71-30l-600 0q-40 0-70 30t-30 70l0 600q0 42 30 71t70 29l600 0z m-50-450l0 100-500 0 0-100 500 0z" horiz-adv-x="800" />
-
-<glyph glyph-name="help" unicode="&#xe81c;" d="M494 740q86-62 86-184 0-64-42-124-12-20-88-80l-46-30q-40-34-48-60-6-16-8-44 0-14-16-14l-128 0q-16 0-16 12 4 98 28 124 16 22 48 48t56 42l24 14q22 16 34 34 28 44 28 70 0 40-26 78-28 36-92 36-68 0-94-44-28-42-28-92l-166 0q6 162 114 232 70 42 166 42 130 0 214-60z m-216-636q44 0 73-30t27-74q-2-46-32-73t-74-25q-44 0-73 29t-27 75 32 73 74 25z" horiz-adv-x="580" />
-
-<glyph glyph-name="help-circled" unicode="&#xe81d;" d="M454 810q190 2 326-130t140-322q2-190-131-327t-323-141q-190-2-327 131t-139 323q-4 190 130 327t324 139z m-2-740q30 0 49 19t19 47q2 30-17 49t-49 19l-2 0q-28 0-47-18t-21-46q0-30 19-49t47-21l2 0z m166 328q26 34 26 78 0 78-54 116-52 38-134 38-64 0-104-26-68-42-72-146l0-4 110 0 0 4q0 26 16 54 16 24 54 24 40 0 52-20 16-20 16-44 0-18-16-40-8-12-20-20l-6-4q-6-4-16-11t-20-15-21-17-17-17q-14-20-18-78l0-8 108 0 0 4q0 12 4 28 6 20 28 36l28 18q46 34 56 50z" horiz-adv-x="920" />
-
-<glyph glyph-name="info" unicode="&#xe81e;" d="M352 850q48 0 74-27t26-69q0-50-39-88t-95-38q-48 0-74 26t-24 72q0 46 35 85t97 39z m-206-1000q-100 0-54 178l60 254q14 56 0 56-12 0-54-18t-72-38l-26 44q90 78 189 126t151 48q78 0 36-162l-70-266q-16-64 6-64 44 0 118 60l30-40q-84-86-175-132t-139-46z" horiz-adv-x="460" />
-
-<glyph glyph-name="info-circled" unicode="&#xe81f;" d="M454 810q190 2 326-130t140-322q2-190-131-327t-323-141q-190-2-327 131t-139 323q-4 190 130 327t324 139z m52-152q-42 0-65-24t-23-50q-2-28 15-44t49-16q38 0 61 22t23 54q0 58-60 58z m-120-594q30 0 84 26t106 78l-18 24q-48-36-72-36-14 0-4 38l42 160q26 96-22 96-30 0-89-29t-115-75l16-26q52 34 74 34 12 0 0-34l-36-152q-26-104 34-104z" horiz-adv-x="920" />
-
-<glyph glyph-name="back" unicode="&#xe820;" d="M750 540q40 0 70-29t30-71l0-290q0-40-30-70t-70-30l-690 0 0 140 650 0 0 210-500 0 0-110-210 180 210 180 0-110 540 0z" horiz-adv-x="850" />
-
-<glyph glyph-name="home" unicode="&#xe821;" d="M888 336q16-16 11-27t-27-11l-84 0 0-310q0-14-1-21t-8-13-23-6l-204 0 0 310-204 0 0-310-194 0q-28 0-35 10t-7 30l0 310-84 0q-22 0-27 11t11 27l400 402q16 16 38 16t38-16z" horiz-adv-x="900" />
-
-<glyph glyph-name="link" unicode="&#xe822;" d="M294 116q14 14 34 14t36-14q32-34 0-70l-42-40q-56-56-132-56-78 0-134 56t-56 132q0 78 56 134l148 148q70 68 144 77t128-43q16-16 16-36t-16-36q-36-32-70 0-50 48-132-34l-148-146q-26-26-26-64t26-62q26-26 63-26t63 26z m450 574q56-56 56-132 0-78-56-134l-158-158q-74-72-150-72-62 0-112 50-14 14-14 34t14 36q14 14 35 14t35-14q50-48 122 24l158 156q28 28 28 64 0 38-28 62-24 26-56 31t-60-21l-50-50q-16-14-36-14t-34 14q-34 34 0 70l50 50q54 54 127 51t129-61z" horiz-adv-x="800" />
-
-<glyph glyph-name="attach" unicode="&#xe823;" d="M244-140q-102 0-170 72-72 70-74 166t84 190l496 496q80 80 174 54 44-12 79-47t47-79q26-96-54-176l-474-474q-40-40-88-46-48-4-80 28-30 24-27 74t47 92l332 334q24 26 50 0t0-50l-332-332q-44-44-20-70 12-8 24-6 24 4 46 26l474 474q50 50 34 108-16 60-76 76-54 14-108-36l-494-494q-66-76-64-143t52-117q50-48 117-50t141 62l496 494q24 24 50 0 26-22 0-48l-496-496q-82-82-186-82z" horiz-adv-x="939" />
-
-<glyph glyph-name="lock" unicode="&#xe824;" d="M640 476q20 0 40-19t20-41l0-390q0-48-48-66l-60-18q-42-16-96-16l-290 0q-56 0-98 16l-60 18q-48 18-48 66l0 390q0 22 15 41t35 19l100 0 0 70q0 110 51 170t149 60 149-60 51-170l0-70 90 0z m-390 90l0-90 200 0 0 90q0 52-27 81t-73 29-73-29-27-81z" horiz-adv-x="700" />
-
-<glyph glyph-name="lock-open" unicode="&#xe825;" d="M640 450q20 0 40-20t20-40l0-390q0-20-14-39t-34-25l-60-20q-52-16-96-16l-290 0q-46 0-98 16l-60 20q-20 6-34 25t-14 39l0 390q0 22 15 41t35 19l400 0 0 140q0 110-100 110t-100-110l0-40-100 0 0 20q0 110 51 170t149 60q200 0 200-230l0-120 90 0z" horiz-adv-x="700" />
-
-<glyph glyph-name="eye" unicode="&#xe826;" d="M500 630q92 0 177-25t141-62 99-77 63-71 20-45-20-44-63-71-99-78-141-62-177-25-177 25-141 62-99 78-63 71-20 44 20 45 63 71 99 77 141 62 177 25z m0-494q92 0 157 63t65 151q0 90-65 153t-157 63-157-63-65-153q0-88 65-151t157-63z m0 214q8-8 37-2t50 11 25-9q0-44-33-75t-79-31-78 31-32 75q0 46 32 77t78 31q14 0 10-23t-12-47 2-38z" horiz-adv-x="1000" />
-
-<glyph glyph-name="tag" unicode="&#xe827;" d="M944 830q36-106-8-199t-128-157l18-24q16-28 6-54l-48-158q-12-30-36-46l-464-328q-42-30-64 4l-210 304q-12 18-9 39t21 33l464 328q26 18 54 18l158 0q30 0 48-26l28-40q168 130 114 286-10 28 18 40 32 8 38-20z m-216-468q40 32 34 80l-32-16q-8-4-12-4-18 0-28 18-12 30 16 40l24 14q-48 34-92 0-28-18-34-51t14-61q18-26 51-32t59 12z" horiz-adv-x="960" />
-
-<glyph glyph-name="bookmark" unicode="&#xe828;" d="M310 800q22 0 36-15t14-35l0-850-180 180-180-180 0 850q0 50 40 50l270 0z" horiz-adv-x="360" />
-
-<glyph glyph-name="bookmarks" unicode="&#xe829;" d="M500 850q20 0 35-15t15-35l0-850-150 180 0 620q0 20-15 35t-35 15l-100 0q0 50 40 50l210 0z m-250-150q20 0 35-15t15-35l0-800-150 180-150-180 0 800q0 50 40 50l210 0z" horiz-adv-x="550" />
-
-<glyph glyph-name="flag" unicode="&#xe82a;" d="M874 616q14 6 22-1t0-19q-96-138-164-213t-110-90-73-2-60 37-63 40-93-4-139-86l90-352-100 0-184 720 92 34q90 66 152 86t98 3 64-51 62-71 79-62 129-20 198 51z" horiz-adv-x="900" />
-
-<glyph glyph-name="thumbs-up" unicode="&#xe82b;" d="M582 480q2-6 58-13t108-24 52-47q0-72-61-284t-107-212q-144 0-288 42t-144 88l0 342q0 14 15 34t46 45 53 41 62 43 46 31q50 34 104 100t85 104 41 26q48-76 29-137t-59-119-40-60z m-432-4q14 0 0-14-50-50-50-104l0-318q0-50 52-104 10-10-2-10-26 0-55 8t-62 45-33 99l0 242q0 62 33 100t63 47 54 9z" horiz-adv-x="800" />
-
-<glyph glyph-name="thumbs-down" unicode="&#xe82c;" d="M218 218q-2 6-57 13t-108 24-53 47q0 72 62 285t106 213q144 0 288-43t144-89l0-342q0-10-8-24t-25-30-32-29-42-32-41-29-41-28l-33-22q-50-34-104-100t-85-104-41-26q-48 76-29 137t59 119 40 60z m432 4q-12 0 2 14 48 50 48 104l0 318q0 50-52 104-10 10 2 10 26 0 55-8t62-45 33-99l0-242q0-48-18-81t-45-48-48-21-39-6z" horiz-adv-x="800" />
-
-<glyph glyph-name="download" unicode="&#xe82d;" d="M968 198q18-10 27-32t3-40l-28-154q-4-20-22-33t-40-13l-816 0q-22 0-40 13t-22 33l-28 154q-10 48 32 72l158 108 98 0-170-130 178 0q8 0 12-8l40-110 300 0 40 110q8 8 12 8l178 0-170 130 98 0z m-208 322l-260-244-260 244 166 0 0 256 190 0 0-256 164 0z" horiz-adv-x="1000" />
-
-<glyph glyph-name="upload" unicode="&#xe82e;" d="M500 776l260-244-164 0 0-256-190 0 0 256-166 0z m468-578q18-10 27-32t3-40l-28-154q-4-20-22-33t-40-13l-816 0q-22 0-40 13t-22 33l-28 154q-10 48 32 72l158 108 98 0-170-130 178 0q8 0 12-8l40-110 300 0 40 110q8 8 12 8l178 0-170 130 98 0z" horiz-adv-x="1000" />
-
-<glyph glyph-name="upload-cloud" unicode="&#xe82f;" d="M760 494q100 0 170-68t70-166-70-166-170-68l-190 0 0 190 106 0-176 230-174-230 104 0 0-190-248 0q-74 0-128 52t-54 124q0 74 53 126t129 52q14 0 20-2-2 12-2 38 0 108 78 184t188 76q90 0 160-52t94-134q28 4 40 4z" horiz-adv-x="1000" />
-
-<glyph glyph-name="reply" unicode="&#xe830;" d="M900 10q-86 152-208 197t-330 45l0-218-362 334 362 322 0-192q90 0 168-27t131-70 96-95 69-104 44-95 24-69z" horiz-adv-x="900" />
-
-<glyph glyph-name="reply-all" unicode="&#xe831;" d="M362 556l-212-188 212-196 0-138-362 334 362 322 0-134z m250-58q104 0 182-50t115-122 60-144 27-122l4-50q-86 154-168 198t-220 44l0-218-362 334 362 322 0-192z" horiz-adv-x="1000" />
-
-<glyph glyph-name="forward" unicode="&#xe832;" d="M540 252q-210 0-332-45t-208-197q4 20 13 53t50 117 96 148 156 117 225 53l0 192 360-322-360-334 0 218z" horiz-adv-x="900" />
-
-<glyph glyph-name="quote" unicode="&#xe833;" d="M146 680q146 0 184-146 38-140-40-302-80-168-224-204-32-8-66-8l0 70q112 0 182 108 54 86 26 146-16 36-62 36-60 0-103 44t-43 106 43 106 103 44z m420 0q146 0 184-146 38-140-40-302-80-168-224-204-32-8-66-8l0 70q112 0 182 108 54 86 26 146-16 36-62 36-60 0-103 44t-43 106 43 106 103 44z" horiz-adv-x="762" />
-
-<glyph glyph-name="code" unicode="&#xe834;" d="M380 636q16-14 16-32t-16-30l-246-224 246-226q16-12 16-30t-16-32q-30-30-60 0l-320 288 320 286q30 30 60 0z m302 0l318-286-318-288q-32-30-62 0-32 32 0 62l248 226-248 224q-32 30 0 62 30 30 62 0z" horiz-adv-x="1000" />
-
-<glyph glyph-name="export" unicode="&#xe835;" d="M750 60l0 56 100 82 0-188q0-20-15-35t-35-15l-750 0q-20 0-35 15t-15 35l0 550q0 22 14 36t36 14l288 0q-32-24-59-49t-39-39l-10-12-130 0 0-450 650 0z m-82 348q-166 0-242-41t-160-181q0 8 1 22t9 56 22 79 44 83 70 79 107 56 149 23l0 156 332-250-332-260 0 178z" horiz-adv-x="1000" />
-
-<glyph glyph-name="pencil" unicode="&#xe836;" d="M718 680q32-32 47-64t15-48l0-16-252-252-290-288-238-52 50 240 290 288 252 252q54 12 126-60z m-494-640l24 24q-2 44-52 94-22 22-45 35t-35 13l-14 2-22-24-18-80q28-16 46-34 24-24 36-48z" horiz-adv-x="780" />
-
-<glyph glyph-name="feather" unicode="&#xe837;" d="M60-138q-6-20-26-8-18 8-16 34 4 100 50 226-100 154-52 316 10-32 32-78t44-80 32-30q8 4 0 83t-11 166 25 157q22 44 80 94t104 70q-24-46-33-94t-4-78 21-32q12 0 84 120t106 122q46 4 114-29t82-65q12-24 0-79t-40-83q-44-44-146-62t-114-24q-16-10 12-34 54-48 176-20-56-80-136-114t-132-38-54-10q-4-24 49-54t101-14q-30-56-63-84t-54-35-76-11-85-8z" horiz-adv-x="698" />
-
-<glyph glyph-name="print" unicode="&#xe838;" d="M66 526q-26 0-22 22 4 10 12 14 2 0 49 17t93 32 58 15l44 0 0 150 380 0 0-150 46 0q12 0 57-15t92-32 49-17q18-8 12-26-4-10-20-10l-850 0z m860-56q20 0 37-19t17-41l0-174q0-22-17-41t-37-19l-100 0 44-250-760 0 44 250-98 0q-20 0-38 19t-18 41l0 174q0 22 18 41t38 19l870 0z m-716-444l560 0-70 324-420 0z" horiz-adv-x="980" />
-
-<glyph glyph-name="retweet" unicode="&#xe839;" d="M250 190l272 0 128-140-448 0q-42 0-71 30t-29 70l0 302-102 0 176 198 174-198-100 0 0-262z m650 60l100 0-174-200-176 200 102 0 0 260-274 0-128 140 450 0q40 0 70-29t30-71l0-300z" horiz-adv-x="1000" />
-
-<glyph glyph-name="keyboard" unicode="&#xe83a;" d="M930 650q28 0 49-21t21-49l0-460q0-30-21-50t-49-20l-860 0q-28 0-49 20t-21 50l0 460q0 28 21 49t49 21l860 0z m-380-100l0-100 100 0 0 100-100 0z m150-150l-100 0 0-100 100 0 0 100z m-300 150l0-100 100 0 0 100-100 0z m150-150l-100 0 0-100 100 0 0 100z m-300 150l0-100 100 0 0 100-100 0z m150-150l-100 0 0-100 100 0 0 100z m-300 150l0-100 100 0 0 100-100 0z m150-150l-100 0 0-100 100 0 0 100z m-50-250l0 100-100 0 0-100 100 0z m550 0l0 100-500 0 0-100 500 0z m150 0l0 100-100 0 0-100 100 0z m-150 150l100 0 0 100-100 0 0-100z m150 150l0 100-200 0 0-100 200 0z" horiz-adv-x="1000" />
-
-<glyph glyph-name="comment" unicode="&#xe83b;" d="M700 700q42 0 71-29t29-71l0-350q0-40-29-70t-71-30l-200 0 0-150-200 150-200 0q-40 0-70 30t-30 70l0 350q0 42 30 71t70 29l600 0z" horiz-adv-x="800" />
-
-<glyph glyph-name="chat" unicode="&#xe83c;" d="M290 240l350 0q2 0 6 2l4 0 0-92q0-40-29-70t-71-30l-250 0-150-150 0 150-50 0q-40 0-70 30t-30 70l0 300q0 42 30 71t70 29l190 0 0-310z m610 560q42 0 71-29t29-71l0-300q0-40-29-70t-71-30l-50 0 0-150-150 150-350 0 0 400q0 42 30 71t70 29l450 0z" horiz-adv-x="1000" />
-
-<glyph glyph-name="bell" unicode="&#xe83d;" d="M632 426q16-34 40-52t45-22 44-23 35-55q22-62-74-161t-252-157q-164-58-297-45t-155 75q-20 54 12 111t18 111q-56 192-47 300t113 192q26 22 29 51t29 39q24 8 46-12t56-18q132 2 198-66t160-268z m-186-404q88 32 159 85t100 91 25 50q-8 22-49 33t-124 1-187-48q-102-38-173-87t-94-84-17-53q4-12 50-22t134-4 176 38z m-62 174q8 2 21 7t17 7l2-2q14-40-17-83t-89-63q-96-36-152 14 78 68 218 120z" horiz-adv-x="800" />
-
-<glyph glyph-name="attention" unicode="&#xe83e;" d="M957-24q10-16 0-34-10-16-30-16l-892 0q-18 0-28 16-13 18-2 34l446 782q8 18 30 18t30-18z m-420 50l0 100-110 0 0-100 110 0z m0 174l0 300-110 0 0-300 110 0z" horiz-adv-x="962" />
-
-<glyph glyph-name="alert" unicode="&#xe83f;" d="M885 234q20-16 16-33t-28-23l-78-22q-24-6-40-28t-14-48l4-82q2-24-14-34t-38 0l-86 44q-22 12-47 4t-35-30l-46-88q-12-22-29-23t-33 19l-50 78q-34 48-88 20l-122-70q-22-14-32-6t-2 32l54 164q8 24-4 44t-36 22l-106 12q-24 4-29 18t15 30l86 76q20 16 20 41t-20 41l-86 76q-20 16-16 33t28 23l78 22q24 6 41 28t15 48l-6 82q0 26 15 36t37 0l80-38q24-10 49-2t37 30l46 80q12 22 30 21t30-23l50-86q12-22 35-29t45 7l136 84q22 14 30 6t0-32l-60-170q-10-22 2-41t38-21l114-12q26-2 30-16t-16-30l-86-76q-18-16-18-41t18-41z m-384-92l0 104-100 0 0-104 100 0z m0 160l0 260-100 0 0-260 100 0z" horiz-adv-x="901" />
-
-<glyph glyph-name="vcard" unicode="&#xe840;" d="M900 750q42 0 71-29t29-71l0-600q0-40-29-70t-71-30l-800 0q-40 0-70 30t-30 70l0 600q0 42 30 71t70 29l800 0z m0-700l0 600-800 0 0-600 800 0z m-450 196l0-90-250 0 0 90 250 0z m0 150l0-90-250 0 0 90 250 0z m0 150l0-90-250 0 0 90 250 0z m346-320l4-70-250 0q0 70 6 70 84 22 84 66 0 16-27 56t-27 88q0 110 90 110t90-110q0-48-28-88t-28-56q0-20 21-36t43-22z" horiz-adv-x="1000" />
-
-<glyph glyph-name="address" unicode="&#xe841;" d="M426 800q20 0 20-20l0-860q0-20-20-20l-46 0q-20 0-20 20l0 440-176 0q-16 0-28 6-12 2-26 12l-120 82q-10 6-10 16t10 16l120 82q14 10 26 12 8 4 28 4l176 0 0 190q0 20 20 20l46 0z m564-208q10-6 10-16t-10-16l-118-82q-22-12-26-12-14-6-28-6l-302 0-40 230 342 0q18 0 28-4t26-12z" horiz-adv-x="1000" />
-
-<glyph glyph-name="location" unicode="&#xe842;" d="M250 750q104 0 177-73t73-177q0-106-62-243t-126-223l-62-84q-10 12-27 35t-60 89-76 130-60 147-27 149q0 104 73 177t177 73z m0-388q56 0 96 40t40 96-40 95-96 39-95-39-39-95 39-96 95-40z" horiz-adv-x="500" />
-
-<glyph glyph-name="map" unicode="&#xe843;" d="M984 600q16-10 16-30l0-584q0-20-16-30-8-6-16-6t-18 6l-216 136-216-136q-18-10-34 0l-218 136-216-136q-16-10-34 0-16 10-16 30l0 584q0 20 16 30l234 146q18 10 34 0l216-136 218 136q16 10 32 0z m-750-450l0 506-168-104 0-506z m234-104l0 506-168 104 0-506z m234 104l0 506-170-104 0-506z m232-104l0 506-168 104 0-506z" horiz-adv-x="1000" />
-
-<glyph glyph-name="direction" unicode="&#xe844;" d="M848 768q8-8 11-16t-2-22-10-26-19-39-24-49q-54-112-147-286t-157-292l-66-118-54 380-380 56q442 246 696 368 20 10 48 25t39 20 25 9 23 1 17-11z m-92-96l-304-280 28-234z" horiz-adv-x="860" />
-
-<glyph glyph-name="compass" unicode="&#xe845;" d="M474 830q198 2 340-136t146-336q2-200-136-342t-338-146q-198-2-341 137t-145 337q-4 200 135 342t339 144z m12-858q156 2 266 114t108 270-115 267-269 107q-158-2-267-114t-107-270 114-267 270-107z m-234 154q4 26 12 66t41 128 77 132 125 76 141 42l60 10q-4-26-12-66t-41-128-77-132q-42-42-124-74t-142-42z m180 276q-22-20-22-48t22-50q20-22 49-22t49 22q52 52 88 186-136-36-186-88z" horiz-adv-x="960" />
-
-<glyph glyph-name="cup" unicode="&#xe846;" d="M340 760q152 0 249-41t91-87l-72-594q-2-14-34-36t-97-42-137-20-136 20-97 42-35 36l-72 594q-4 28 36 57t121 50 183 21z m0-216q72 0 137 15t98 33 33 30-33 29-98 32-137 15-137-15-98-32-33-29 33-30 98-33 137-15z" horiz-adv-x="681" />
-
-<glyph glyph-name="trash" unicode="&#xe847;" d="M50 458q122-70 330-70t330 70l-54-486q-2-14-35-36t-100-43-141-21-140 21-100 43-36 36z m488 300q94-18 158-55t64-71l0-10q0-58-112-99t-268-41-268 41-112 99l0 10q0 34 64 71t158 55l42 48q22 26 70 26l92 0q52 0 70-26z m-54-112l84 0q-92 110-104 126-14 16-32 16l-102 0q-22 0-32-16l-106-126 84 0 64 66 82 0z" horiz-adv-x="760" />
-
-<glyph glyph-name="doc" unicode="&#xe848;" d="M600 800q42 0 71-29t29-71l0-700q0-40-29-70t-71-30l-500 0q-40 0-70 30t-30 70l0 700q0 42 30 71t70 29l500 0z m0-800l0 700-500 0 0-700 500 0z" horiz-adv-x="700" />
-
-<glyph glyph-name="docs" unicode="&#xe849;" d="M970 480q38-10 30-46l-150-556q-4-16-18-23t-30-3l-406 110q-16 4-24 18t-4 28l24 92-180-48q-40-10-50 26l-160 602q-10 36 28 48l454 122q16 4 30-3t18-23l66-244z m-888 190l144-542 392 106-144 540z m702-742l132 492-298 82 76-282q10-34-28-46l-196-52-26-102z" horiz-adv-x="1001" />
-
-<glyph glyph-name="doc-landscape" unicode="&#xe84a;" d="M0 600q0 42 30 71t70 29l800 0q42 0 71-29t29-71l0-500q0-40-29-70t-71-30l-800 0q-40 0-70 30t-30 70l0 500z m900 0l-800 0 0-500 800 0 0 500z" horiz-adv-x="1000" />
-
-<glyph glyph-name="doc-text" unicode="&#xe84b;" d="M212 308l0 90 280 0 0-90-280 0z m388 492q42 0 71-29t29-71l0-700q0-40-29-70t-71-30l-500 0q-40 0-70 30t-30 70l0 700q0 42 30 71t70 29l500 0z m0-800l0 700-500 0 0-700 500 0z m-110 592l0-88-280 0 0 88 280 0z m0-392l0-88-280 0 0 88 280 0z" horiz-adv-x="700" />
-
-<glyph glyph-name="doc-text-inv" unicode="&#xe84c;" d="M600 800q42 0 71-29t29-71l0-700q0-40-29-70t-71-30l-500 0q-40 0-70 30t-30 70l0 700q0 42 30 71t70 29l500 0z m-460-208l0-88 420 0 0 88-420 0z m420-480l0 88-420 0 0-88 420 0z m0 196l0 90-418 0 0-90 418 0z" horiz-adv-x="700" />
-
-<glyph glyph-name="newspaper" unicode="&#xe84d;" d="M700 800q42 0 71-29t29-71l0-700q0-40-29-70t-71-30l-600 0q-40 0-70 30t-30 70l0 700q0 42 30 71t70 29l600 0z m0-800l0 700-600 0 0-700 600 0z m-250 250l0-50-250 0 0 50 250 0z m150 200l0-50-200 0 0 50 200 0z m-200 50l0 100 200 0 0-100-200 0z m-50 100l0-200-150 0 0 200 150 0z m-50-250l0-50-100 0 0 50 100 0z m50-50l0 50 250 0 0-50-250 0z m250-150l0-50-400 0 0 50 400 0z m-100 50l0 50 100 0 0-50-100 0z" horiz-adv-x="800" />
-
-<glyph glyph-name="book-open" unicode="&#xe84e;" d="M340 238l0-68-200 80 0 68z m0 208l0-68-200 80 0 68z m538 346q22-12 22-42l0-640q0-34-32-46l-398-160q-8-2-10-2t-5-1-5-1-5 1-5 1l-10 2-398 160q-32 12-32 46l0 640q0 30 22 42 22 16 46 6l382-154 382 154q24 10 46-6z m-478-788l0 560-320 128 0-560z m420 128l0 560-320-128 0-560z m-60 186l0-68-200-80 0 68z m0 208l0-68-200-80 0 68z" horiz-adv-x="900" />
-
-<glyph glyph-name="book" unicode="&#xe84f;" d="M682 594q18-8 18-28l0-562q0-14-12-25t-28-11q-46 0-46 36l0 522q0 12-12 18l-404 216q-32 10-68-10-44-20-56-44l408-228q18-8 18-28l0-550q0-22-18-28-6-4-16-4-14 0-20 4-8 6-202 127t-212 131q-26 18-26 34l-6 524q0 28 14 52 28 46 102 77t116 9z" horiz-adv-x="700" />
-
-<glyph glyph-name="folder" unicode="&#xe850;" d="M954 500q32 0 40-12t6-36l-42-452q-2-24-12-37t-42-13l-806 0q-52 0-56 50l-42 452q-2 24 6 36t40 12l908 0z m-34 110l10-40-846 0 14 132q4 20 20 34t36 14l164 0q52 0 86-34l30-30q32-36 86-36l340 0q20 0 38-12t22-28z" horiz-adv-x="1001" />
-
-<glyph glyph-name="archive" unicode="&#xe851;" d="M840 600l0-50-696 0 0 50q0 22 13 35t25 15l608 0q6 0 14-1t22-14 14-35z m-148 150q6 0 14-1t22-14 14-35l-498 0q0 22 13 35t25 15l410 0z m248-200q34-32 38-46 6-18 0-54l-76-450q-4-22-20-35t-28-15l-710 0q-52 0-60 50-6 26-39 223t-39 227q-10 22-3 44t10 26 21 20l10 10 30 30 0-80 836 0 0 80z m-248-270l0 100-70 0 0-80-260 0 0 80-68 0 0-100q0-50 48-50l300 0q22 0 35 12t13 24z" horiz-adv-x="981" />
-
-<glyph glyph-name="box" unicode="&#xe852;" d="M870 750q12 0 21-9t9-21l0-120-900 0 0 120q0 12 9 21t21 9l840 0z m-820-730l0 530 800 0 0-530q0-30-21-50t-49-20l-660 0q-28 0-49 20t-21 50z m250 430l0-100 300 0 0 100-300 0z" horiz-adv-x="900" />
-
-<glyph glyph-name="rss" unicode="&#xe853;" d="M0 730q314 0 537-223t223-537l-118 0q0 266-188 453t-454 187l0 120z m0-238q218 0 371-153t153-369l-118 0q0 166-119 285t-287 119l0 118z m114-296q46 0 80-33t34-81q0-46-34-79t-80-33-80 33-34 79q0 48 34 81t80 33z" horiz-adv-x="760" />
-
-<glyph glyph-name="phone" unicode="&#xe854;" d="M461 290q162 162 118 206l-8 8q-30 30-41 48t-4 54 49 88q20 24 37 39t35 16 30 1 29-13 24-18 26-25 21-22q48-48-6-194t-204-294q-150-150-295-205t-193-7q-2 2-23 22t-25 25-18 24-13 31 2 30 15 35 38 37q42 34 70 47t54 2 35-18 39-37q44-44 208 120z" horiz-adv-x="800" />
-
-<glyph glyph-name="cog" unicode="&#xe855;" d="M760 350q0-72 80-122-12-40-34-82-70 18-136-44-54-58-34-136-40-20-84-36-46 82-132 82t-132-82q-44 16-84 36 20 80-34 136-54 54-136 34-14 26-34 82 82 52 82 132 0 72-82 124 20 56 34 82 74-18 136 44 54 56 34 136 42 22 84 34 46-80 132-80t132 80q42-12 84-34-20-78 34-136 66-62 136-44 22-42 34-82-80-50-80-124z m-340-182q76 0 129 53t53 129-53 130-129 54-129-54-53-130 53-129 129-53z" horiz-adv-x="840" />
-
-<glyph glyph-name="tools" unicode="&#xe856;" d="M155 506q-8-8-11-22t-3-25-2-11q-2-2-17-15t-19-17q-16-14-28 4l-70 76q-11 12 2 24 2 2 18 14t20 16q6 6 27 6t37 14q14 14 18 38t10 30q2 0 9 7t26 22 41 31q134 90 186 96 122 0 148-2 12 0-8-8-120-52-152-76-80-56-36-114 34-46 38-48 8-8-2-14-2-2-38-35t-38-35q-14-8-18-4-42 48-71 60t-67-12z m286-26l410-476q18-22-2-38l-48-42q-22-14-38 4l-414 472q-8 8 0 20l72 62q12 8 20-2z m554 202q16-104-16-166-50-88-154-62-56 12-100-32l-82-78-68 78 68 70q24 24 31 53t6 65 5 58q12 56 140 112 12 6 18-3t2-15q-12-12-46-80-14-10-12-35t40-53q58-40 96 22 6 12 26 41t22 33q4 10 13 9t11-17z m-858-684l254 248 76-86-246-242q-20-20-38-4l-46 46q-22 18 0 38z" horiz-adv-x="1000" />
-
-<glyph glyph-name="share" unicode="&#xe857;" d="M650 200q62 0 106-43t44-107q0-62-44-106t-106-44-106 44-44 106q0 6 1 14t1 12l-260 156q-42-32-92-32-62 0-106 44t-44 106 44 106 106 44q54 0 92-30l260 156q0 4-1 12t-1 12q0 62 44 106t106 44 106-43 44-107q0-62-44-106t-106-44q-52 0-90 32l-262-156q2-8 2-26 0-16-2-24l262-156q36 30 90 30z" horiz-adv-x="800" />
-
-<glyph glyph-name="shareable" unicode="&#xe858;" d="M340 350q0 68 47 114t113 46 113-46 47-114q0-66-47-113t-113-47-113 47-47 113z m-114 60q-14-60-66-60l-160 0 0 120 118 0q40 124 145 202t237 78q164 0 284-116 16-18 16-43t-16-43q-18-16-43-16t-43 16q-78 82-198 82-100 0-176-62t-98-158z m614-60l160 0 0-120-118 0q-40-124-144-202t-238-78q-164 0-282 118-18 18-18 43t18 41q16 18 41 18t43-18q82-82 198-82 100 0 176 63t98 157q12 60 66 60z" horiz-adv-x="1000" />
-
-<glyph glyph-name="basket" unicode="&#xe859;" d="M150 0q0 40 30 70t70 30q42 0 71-30t29-70q0-42-29-71t-71-29q-40 0-70 29t-30 71z m500 0q0 40 30 70t70 30q42 0 71-30t29-70q0-42-29-71t-71-29q-40 0-70 29t-30 71z m-322 236q-36-10-34-23t44-13l562 0 0-76q0-20-20-20l-654 0q-20 0-20 20l0 76-10 46-98 454-98 0 0 80q0 20 20 20l156 0q20 0 20-20l0-86 704 0 0-274q0-22-18-26z" horiz-adv-x="900" />
-
-<glyph glyph-name="bag" unicode="&#xe85a;" d="M835 668q28-26 24-60l-98-648q-8-30-38-30l-586 0q-28 0-40 30-94 620-96 648-5 34 22 60 6 6 54 43t56 43q18 16 56 16l480 0q38 0 56-16 78-58 110-86z m-406-436q56 0 98 34t63 89 30 89 13 66l-92 0q-38-188-112-188t-112 188l-92 0q46-278 204-278z m-352 368l704 0-110 116-484 0z" horiz-adv-x="859" />
-
-<glyph glyph-name="calendar" unicode="&#xe85b;" d="M800 700q42 0 71-29t29-71l0-600q0-40-29-70t-71-30l-700 0q-40 0-70 30t-30 70l0 600q0 42 30 71t70 29l46 0 0-100 160 0 0 100 290 0 0-100 160 0 0 100 44 0z m0-700l0 400-700 0 0-400 700 0z m-540 800l0-170-70 0 0 170 70 0z m450 0l0-170-70 0 0 170 70 0z" horiz-adv-x="900" />
-
-<glyph glyph-name="login" unicode="&#xe85c;" d="M800 800q42 0 71-29t29-71l0-700q0-40-29-70t-71-30l-450 0q-40 0-69 30t-29 70l0 100 98 0 0-100 450 0 0 700-450 0 0-150-98 0 0 150q0 42 29 71t69 29l450 0z m-350-670l0 120-450 0 0 150 450 0 0 120 200-194z" horiz-adv-x="900" />
-
-<glyph glyph-name="logout" unicode="&#xe85d;" d="M502 0l0 100 98 0 0-100q0-40-29-70t-71-30l-400 0q-40 0-70 30t-30 70l0 700q0 42 30 71t70 29l400 0q42 0 71-29t29-71l0-150-98 0 0 150-402 0 0-700 402 0z m398 326l-198-196 0 120-450 0 0 150 450 0 0 120z" horiz-adv-x="900" />
-
-<glyph glyph-name="mic" unicode="&#xe85e;" d="M620 488q20 0 20-20l0-138q0-92-69-164t-201-84l0-132 130 0q20 0 20-20l0-60q0-20-20-20l-360 0q-20 0-20 20l0 60q0 20 20 20l130 0 0 132q-132 12-201 84t-69 164l0 138q0 20 20 20l30 0q20 0 20-20l0-138q0-66 59-123t191-57 191 57 59 123l0 138q0 20 20 20l30 0z m-300-238q-80 0-115 25t-35 55l0 158 300 0 0-158q0-30-35-55t-115-25z m150 520l0-212-300 0 0 212q0 30 35 55t115 25 115-25 35-55z" horiz-adv-x="640" />
-
-<glyph glyph-name="mute" unicode="&#xe85f;" d="M868 778q16-16 16-36t-16-36l-782-782q-18-14-34-14-18 0-36 14-16 14-16 36t16 36l782 782q34 32 70 0z m-216-386l50 50q74-92 101-172t-7-116q-24-24-75-57t-131-71-161-45-165 23l278 276q44-32 88-54t67-25 33 1q6 10 2 34t-26 68-54 88z m-276 62l-270-270q-40 132 28 283t132 215q34 32 105 11t159-85l-52-50q-58 38-105 53t-57 5q-4-8-2-28t19-58 43-76z" horiz-adv-x="884" />
-
-<glyph glyph-name="sound" unicode="&#xe860;" d="M176 588q42 42 149-5t217-157 157-217 5-149q-28-28-92-67t-156-78-194-29-176 84-84 176 29 194 78 156 67 92z m464-480q8 10-3 49t-49 101-96 118q-56 58-118 96t-101 49-49 3q-8-10 3-49t49-101 94-120q58-56 120-94t101-49 49-3z m6 394q-18 0-34 16-16 14-16 35t16 35l94 96q36 32 72 0 32-36 0-72l-96-94q-16-16-36-16z m-180 124q-18 10-23 30t5 38l54 96q26 44 68 20 18-10 23-30t-5-38l-54-96q-14-26-42-26-14 0-26 6z m438-150q10-18 4-38t-24-30l-96-54q-16-8-24-8-28 0-44 26-10 18-4 38t24 30l96 54q18 10 38 5t30-23z" horiz-adv-x="910" />
-
-<glyph glyph-name="volume" unicode="&#xe861;" d="M896 180q0-34-24-57t-56-23l-780 0q-22 0-31 5t-3 15 24 20l802 452q28 18 48 7t20-45l0-374z" horiz-adv-x="896" />
-
-<glyph glyph-name="clock" unicode="&#xe862;" d="M460 810q190 0 325-135t135-325-135-325-325-135-325 135-135 325 135 325 325 135z m0-820q150 0 255 106t105 254q0 150-105 255t-255 105q-148 0-254-105t-106-255q0-148 106-254t254-106z m36 620l0-244 150-150-50-50-170 170 0 274 70 0z" horiz-adv-x="920" />
-
-<glyph glyph-name="hourglass" unicode="&#xe863;" d="M560 622q0-44-48-96t-97-99-49-77 49-76 97-97 48-97l0-118q0-34-86-73t-194-39-194 39-86 73l0 118q0 46 48 97t97 97 49 76-49 77-97 99-48 96l0 118q0 32 87 71t193 39 193-39 87-71l0-118z m-482 112l-18-14q-4-8 4-14 92-52 216-52 132 0 220 50 14 10-16 30-96 54-202 54-120 0-204-54z m228-384q0 18 4 33t18 33 20 25 31 31 29 28q92 92 92 122l2 50q-100-54-222-54t-222 54l4-50q0-32 90-122 6-6 22-21t23-22l19-19t17-21 11-20 9-23 3-24q0-10-1-19t-6-18-8-16-11-17l-12-15t-15-16-16-15-18-16-17-16q-90-90-90-122l0-66q8 4 66 23t92 43 34 58q0 30 26 30t26-30q0-34 33-58t94-43 67-23l0 66q0 30-92 122-4 4-21 20t-22 21-18 19-18 22-12 20-9 23-2 23z" horiz-adv-x="560" />
-
-<glyph glyph-name="lamp" unicode="&#xe864;" d="M209-110l0 104 282 0 0-104q-70-42-142-40-70-2-140 40z m276 164l-270 0q0 72-36 140t-78 113-74 112-26 139q8 120 94 206t254 86q170 0 255-86t95-206q4-60-16-113t-52-96-65-85-57-96-24-114z m-378 496q-4-4 0-20t2-20 5-19 6-18 8-18 11-19 13-19 14-19 15-21 16-23q88-122 112-212l82 0q24 94 112 212 4 6 25 35t25 36 17 29 16 33 6 28 1 35q-16 196-244 196-226 0-242-196z" horiz-adv-x="700" />
-
-<glyph glyph-name="light-down" unicode="&#xe865;" d="M350 510q68 0 114-47t46-113q0-68-46-114t-114-46q-66 0-113 46t-47 114q0 66 47 113t113 47z m0-264q44 0 73 30t29 74q0 42-29 72t-73 30q-42 0-72-30t-30-72q0-44 30-74t72-30z m-300 144q20 0 35-12t15-28q0-40-50-40t-50 40q0 16 15 28t35 12z m546 204q28-28-8-64-14-14-33-16t-29 10q-12 12-10 31t16 33q36 34 64 6z m54-204q20 0 35-12t15-28q0-40-50-40-48 0-48 40 0 16 14 28t34 12z m-300-290q16 0 28-15t12-35-12-35-28-15-28 15-12 35 12 35 28 15z m-238 62q36 36 64 8t-8-64q-14-14-33-16t-29 8q-30 28 6 64z m-10 430q28 28 64-8 14-14 16-33t-8-29q-30-28-64 6-36 36-8 64z m432-484q-34 36-6 64t64-8q14-14 16-33t-10-29q-30-28-64 6z m-184 492q-16 0-28 15t-12 35 12 35 28 15 28-15 12-35-12-35-28-15z" horiz-adv-x="700" />
-
-<glyph glyph-name="light-up" unicode="&#xe866;" d="M950 390q20 0 35-12t15-28q0-40-50-40l-48 0q-50 0-50 40 0 16 15 28t35 12l48 0z m-450 234q114 0 195-80t81-194q0-116-81-196t-195-80-194 80-80 196q0 114 80 194t194 80z m0-474q82 0 141 58t59 142q0 82-59 141t-141 59-141-59-59-141q0-84 59-142t141-58z m-350 200q0-40-50-40l-50 0q-50 0-50 40 0 16 15 28t35 12l50 0q20 0 35-12t15-28z m350 350q-16 0-28 15t-12 35l0 50q0 20 12 35t28 15 28-15 12-35l0-50q0-20-12-35t-28-15z m0-700q16 0 28-15t12-35l0-50q0-20-12-35t-28-15-28 15-12 35l0 50q0 20 12 35t28 15z m368 660l-34-34q-34-34-64-8-28 28 8 64 4 6 34 36 36 34 64 6t-8-64z m-700-588q14 16 33 18t29-10q12-12 10-31t-16-33l-36-36q-14-14-33-16t-29 10q-30 28 6 64 6 4 36 34z m20 646l36-36q36-36 6-64-10-10-29-8t-33 16q-30 30-36 34-14 14-16 33t10 31q10 12 29 10t33-16z m590-702q-36 36-8 64t64-8l34-34q36-36 8-64t-64 6q-30 30-34 36z" horiz-adv-x="1000" />
-
-<glyph glyph-name="adjust" unicode="&#xe867;" d="M950 390q20 0 35-12t15-28q0-40-50-40l-48 0q-50 0-50 40 0 16 15 28t35 12l48 0z m-450 234q114 0 195-80t81-194q0-116-81-196t-195-80-194 80-80 196q0 114 80 194t194 80z m6-474l0 400q-86 0-146-59t-60-141q0-84 60-142t146-58z m-356 200q0-40-50-40l-50 0q-50 0-50 40 0 16 15 28t35 12l50 0q20 0 35-12t15-28z m350 350q-16 0-28 15t-12 35l0 50q0 20 12 35t28 15 28-15 12-35l0-50q0-20-12-35t-28-15z m0-700q16 0 28-15t12-35l0-50q0-20-12-35t-28-15-28 15-12 35l0 50q0 20 12 35t28 15z m368 660l-34-34q-34-34-64-8-28 28 8 64 4 6 34 36 36 34 64 6t-8-64z m-700-588q14 16 33 18t29-10q12-12 10-31t-16-33l-36-36q-14-14-33-16t-29 10q-30 28 6 64 6 4 36 34z m20 646l36-36q36-36 6-64-10-10-29-8t-33 16q-30 30-36 34-14 14-16 33t10 31q10 12 29 10t33-16z m590-702q-36 36-8 64t64-8l34-34q36-36 8-64t-64 6q-30 30-34 36z" horiz-adv-x="1000" />
-
-<glyph glyph-name="block" unicode="&#xe868;" d="M480 830q200 0 340-140t140-340q0-198-140-339t-340-141q-198 0-339 141t-141 339q0 200 141 340t339 140z m258-220z m-622-260q0-132 82-230l514 514q-100 82-232 82-152 0-258-107t-106-259z m106-258z m258-106q152 0 259 107t107 257q0 130-82 232l-514-514q98-82 230-82z" horiz-adv-x="960" />
-
-<glyph glyph-name="resize-full" unicode="&#xe869;" d="M476 746l316 0 0-316-100 124-146-152-100 100 152 146z m-230-444l100-100-152-146 122-100-316 0 0 316 100-122z" horiz-adv-x="792" />
-
-<glyph glyph-name="resize-small" unicode="&#xe86a;" d="M156 146l-106 100 296 0 0-296-100 106-146-156-100 100z m744 554l-154-144 104-100-294 0 0 294 100-104 144 154z" horiz-adv-x="900" />
-
-<glyph glyph-name="popup" unicode="&#xe86b;" d="M700 750q42 0 71-29t29-71l0-400q0-40-29-70t-71-30l-400 0q-40 0-70 30t-30 70l0 402q0 40 29 69t71 29l400 0z m0-500l0 400-400 0 0-400 400 0z m-600 100l0-300 300 0 0-100-300 0q-40 0-70 30t-30 70l0 300 100 0z" horiz-adv-x="800" />
-
-<glyph glyph-name="publish" unicode="&#xe86c;" d="M900 800q42 0 71-30t29-70l0-600q0-42-29-71t-71-29l-198 0 0 98 200 0 0 462-802 0 0-462 200 0 0-98-200 0q-40 0-70 29t-30 71l0 600q0 40 30 70t70 30l800 0z m-770-168q38 0 38 38 0 16-11 26t-27 10-27-11-11-25q0-16 11-27t27-11z m100 0q38 0 38 38 0 16-11 26t-27 10-27-11-11-25q0-16 11-27t27-11z m672 6l0 62-602 0 0-62 602 0z m-404-198l242-240-150 0 0-300-184 0 0 300-150 0z" horiz-adv-x="1000" />
-
-<glyph glyph-name="window" unicode="&#xe86d;" d="M900 750q42 0 71-30t29-70l0-600q0-42-29-71t-71-29l-800 0q-40 0-70 29t-30 71l0 600q0 40 30 70t70 30l800 0z m-670-94q-16 0-27-11t-11-25q0-16 11-27t27-11q38 0 38 38 0 16-11 26t-27 10z m-138-36q0-16 11-27t27-11q38 0 38 38 0 16-11 26t-27 10-27-11-11-25z m810-570l0 460-802 0 0-460 802 0z m0 540l0 60-602 0 0-60 602 0z" horiz-adv-x="1000" />
-
-<glyph glyph-name="arrow-combo" unicode="&#xe86e;" d="M230 850l230-364-460 0z m0-1000l-230 366 460 0z" horiz-adv-x="460" />
-
-<glyph glyph-name="down-circled" unicode="&#xe86f;" d="M460 810q190 0 325-135t135-325-135-325-325-135-325 135-135 325 135 325 325 135z m0-820q148 0 254 106t106 254q0 150-106 255t-254 105-254-105-106-255q0-148 106-254t254-106z m90 554l0-206 112 0-202-190-202 190 112 0 0 206 180 0z" horiz-adv-x="920" />
-
-<glyph glyph-name="left-circled" unicode="&#xe870;" d="M920 350q0-190-135-325t-325-135-325 135-135 325q0 192 135 326t325 134 325-134 135-326z m-820 0q0-148 106-254t254-106 254 106 106 254q0 150-106 255t-254 105-254-105-106-255z m552-90l-204 0 0-112-190 202 190 204 0-114 204 0 0-180z" horiz-adv-x="920" />
-
-<glyph glyph-name="right-circled" unicode="&#xe871;" d="M0 350q0 190 135 325t325 135 325-135 135-325-135-325-325-135-325 135-135 325z m820 0q0 150-105 255t-255 105q-148 0-254-105t-106-255q0-148 106-254t254-106q150 0 255 106t105 254z m-552 90l204 0 0 114 190-204-190-202 0 112-204 0 0 180z" horiz-adv-x="920" />
-
-<glyph glyph-name="up-circled" unicode="&#xe872;" d="M460-110q-190 0-325 135t-135 325q0 192 135 326t325 134 325-134 135-326q0-190-135-325t-325-135z m0 820q-148 0-254-105t-106-255q0-148 106-254t254-106q150 0 255 106t105 254q0 150-105 255t-255 105z m-90-552l0 204-112 0 202 192 202-192-112 0 0-204-180 0z" horiz-adv-x="920" />
-
-<glyph glyph-name="down-open" unicode="&#xe873;" d="M564 422l-234-224q-18-18-40-18t-40 18l-234 224q-16 16-16 41t16 41q38 38 78 0l196-188 196 188q40 38 78 0 16-16 16-41t-16-41z" horiz-adv-x="580" />
-
-<glyph glyph-name="left-open" unicode="&#xe874;" d="M242 626q14 16 39 16t41-16q38-36 0-80l-186-196 186-194q38-44 0-80-16-16-40-16t-40 16l-226 236q-16 16-16 38 0 24 16 40 206 214 226 236z" horiz-adv-x="341" />
-
-<glyph glyph-name="right-open" unicode="&#xe875;" d="M98 626l226-236q16-16 16-40 0-22-16-38l-226-236q-16-16-40-16t-40 16q-36 36 0 80l186 194-186 196q-36 44 0 80 16 16 41 16t39-16z" horiz-adv-x="340" />
-
-<glyph glyph-name="up-open" unicode="&#xe876;" d="M564 280q16-16 16-41t-16-41q-38-38-78 0l-196 188-196-188q-40-38-78 0-16 16-16 41t16 41l234 224q16 16 40 16t40-16z" horiz-adv-x="580" />
-
-<glyph glyph-name="down-open-mini" unicode="&#xe877;" d="M405 470q22 26 48 0 26-22 0-48l-196-192q-22-22-48 0l-196 192q-26 26 0 48 24 24 50 0l170-156z" horiz-adv-x="466" />
-
-<glyph glyph-name="left-open-mini" unicode="&#xe878;" d="M252 180q26-26 0-48-26-26-48 0l-192 194q-24 24 0 50l192 194q22 26 48 0 26-22 0-48l-156-172z" horiz-adv-x="265" />
-
-<glyph glyph-name="right-open-mini" unicode="&#xe879;" d="M13 180l158 170-158 172q-26 26 0 48 26 26 48 0l192-194q24-26 0-50l-192-194q-22-26-48 0-26 22 0 48z" horiz-adv-x="265" />
-
-<glyph glyph-name="up-open-mini" unicode="&#xe87a;" d="M62 230q-26-22-50 0-24 24 0 50l196 190q26 26 48 0l196-190q24-26 0-50-24-22-50 0l-170 158z" horiz-adv-x="464" />
-
-<glyph glyph-name="down-open-big" unicode="&#xe87b;" d="M63 570l370-356 372 356q22 26 48 0 26-22 0-48l-396-392q-22-22-48 0l-396 392q-26 26 0 48 24 24 50 0z" horiz-adv-x="866" />
-
-<glyph glyph-name="left-open-big" unicode="&#xe87c;" d="M452-20q26-26 0-48-26-26-48 0l-392 394q-24 24 0 50l392 394q22 26 48 0 26-22 0-48l-358-372z" horiz-adv-x="465" />
-
-<glyph glyph-name="right-open-big" unicode="&#xe87d;" d="M13-20l358 370-358 372q-26 26 0 48 26 26 48 0l392-394q24-26 0-50l-392-394q-22-26-48 0-26 22 0 48z" horiz-adv-x="465" />
-
-<glyph glyph-name="up-open-big" unicode="&#xe87e;" d="M804 130l-372 358-370-358q-26-22-50 0-24 24 0 50l396 390q26 26 48 0l396-390q24-26 0-50-26-22-48 0z" horiz-adv-x="864" />
-
-<glyph glyph-name="down" unicode="&#xe87f;" d="M660 366l-330-380-330 380 192 0 0 350 276 0 0-350 192 0z" horiz-adv-x="660" />
-
-<glyph glyph-name="left" unicode="&#xe880;" d="M378 20l-378 330 378 330 0-190 352 0 0-278-352 0 0-192z" horiz-adv-x="730" />
-
-<glyph glyph-name="right" unicode="&#xe881;" d="M350 680l380-330-380-330 0 192-350 0 0 278 350 0 0 190z" horiz-adv-x="730" />
-
-<glyph glyph-name="up" unicode="&#xe882;" d="M660 336l-192 0 0-350-276 0 0 350-192 0 330 380z" horiz-adv-x="660" />
-
-<glyph glyph-name="down-dir" unicode="&#xe883;" d="M460 550l-230-400-230 400 460 0z" horiz-adv-x="460" />
-
-<glyph glyph-name="left-dir" unicode="&#xe884;" d="M400 580l0-460-400 230z" horiz-adv-x="400" />
-
-<glyph glyph-name="right-dir" unicode="&#xe885;" d="M0 580l400-230-400-230 0 460z" horiz-adv-x="400" />
-
-<glyph glyph-name="up-dir" unicode="&#xe886;" d="M0 150l230 400 230-400-460 0z" horiz-adv-x="460" />
-
-<glyph glyph-name="down-bold" unicode="&#xe887;" d="M760 366l-380-380-380 380 192 0 0 350 376 0 0-350 192 0z" horiz-adv-x="760" />
-
-<glyph glyph-name="left-bold" unicode="&#xe888;" d="M378 730l0-190 352 0 0-378-352 0 0-192-378 380z" horiz-adv-x="730" />
-
-<glyph glyph-name="right-bold" unicode="&#xe889;" d="M350 730l380-380-380-380 0 192-350 0 0 378 350 0 0 190z" horiz-adv-x="730" />
-
-<glyph glyph-name="up-bold" unicode="&#xe88a;" d="M760 336l-192 0 0-350-376 0 0 350-192 0 380 380z" horiz-adv-x="760" />
-
-<glyph glyph-name="down-thin" unicode="&#xe88b;" d="M500 100l-250-240-250 240 162 0 0 740 176 0 0-740 162 0z" horiz-adv-x="500" />
-
-<glyph glyph-name="left-thin" unicode="&#xe88c;" d="M240 100l-240 250 240 250 0-160 740 0 0-178-740 0 0-162z" horiz-adv-x="980" />
-
-<glyph glyph-name="right-thin" unicode="&#xe88d;" d="M742 100l0 162-742 0 0 178 742 0 0 160 238-250z" horiz-adv-x="980" />
-
-<glyph glyph-name="up-thin" unicode="&#xe88e;" d="M500 602l-162 0 0-742-176 0 0 742-162 0 250 238z" horiz-adv-x="500" />
-
-<glyph glyph-name="ccw" unicode="&#xe88f;" d="M532 736q170 0 289-120t119-290-119-290-289-120q-142 0-252 88l70 74q84-60 182-60 126 0 216 90t90 218-90 218-216 90q-124 0-214-87t-92-211l142 0-184-204-184 204 124 0q2 166 122 283t286 117z" horiz-adv-x="940" />
-
-<glyph glyph-name="cw" unicode="&#xe890;" d="M408 760q168 0 287-116t123-282l122 0-184-206-184 206 144 0q-4 124-94 210t-214 86q-126 0-216-90t-90-218q0-126 90-216t216-90q104 0 182 60l70-76q-110-88-252-88-168 0-288 120t-120 290 120 290 288 120z" horiz-adv-x="940" />
-
-<glyph glyph-name="arrows-ccw" unicode="&#xe891;" d="M186 140l116 116 0-292-276 16 88 86q-116 122-114 290t120 288q100 100 240 116l4-102q-100-16-172-88-88-88-90-213t84-217z m332 598l276-16-88-86q116-122 114-290t-120-288q-96-98-240-118l-2 104q98 16 170 88 88 88 90 213t-84 217l-114-116z" horiz-adv-x="820" />
-
-<glyph glyph-name="level-down" unicode="&#xe892;" d="M100 200q-42 0-71 30t-29 70l0 350 140 0 0-310 364 0 0 150 240-220-240-220 0 150-404 0z" horiz-adv-x="744" />
-
-<glyph glyph-name="level-up" unicode="&#xe893;" d="M200 350l0-90-200 160 200 170 0-100 550 0q40 0 70-29t30-71l0-280-140 0 0 240-510 0z" horiz-adv-x="850" />
-
-<glyph glyph-name="shuffle" unicode="&#xe894;" d="M754 516q-54 0-105-32t-80-66-83-104q-48-62-75-94t-78-77-107-66-122-21l-104 0 0 140 104 0q54 0 106 32t81 66 83 104q62 82 101 126t116 88 163 44l36 0 0 120 210-180-210-180 0 100-36 0z m-484-88q-74 78-166 78l-104 0 0 140 104 0q140 0 254-108-14-16-37-45t-27-33q-8-12-24-32z m520-242l0 100 210-180-210-180 0 120-36 0q-140 0-260 116 46 58 72 92 0 2 6 9t8 11q84-88 174-88l36 0z" horiz-adv-x="1000" />
-
-<glyph glyph-name="loop" unicode="&#xe895;" d="M800 540q42 0 71-29t29-71l0-290q0-40-29-70t-71-30l-700 0q-40 0-70 30t-30 70l0 290q0 42 30 71t70 29l250 0 0 110 200-180-200-180 0 110-210 0 0-210 620 0 0 210-150 0 0 140 190 0z" horiz-adv-x="900" />
-
-<glyph glyph-name="switch" unicode="&#xe896;" d="M700 592l0-140-500 0 0-90-200 160 200 170 0-100 500 0z m300-420l-200-160 0 90-500 0 0 140 500 0 0 100z" horiz-adv-x="1000" />
-
-<glyph glyph-name="play" unicode="&#xe897;" d="M486 376q14-10 14-26 0-14-14-24l-428-266q-24-16-41-6t-17 40l0 514q0 30 17 40t41-6z" horiz-adv-x="500" />
-
-<glyph glyph-name="stop" unicode="&#xe898;" d="M526 650q74 0 74-64l0-470q0-66-74-66l-450 0q-76 0-76 66l0 470q0 36 18 50t58 14l450 0z" horiz-adv-x="600" />
-
-<glyph glyph-name="pause" unicode="&#xe899;" d="M440 700q90 0 90-64l0-570q0-66-90-66t-90 66l0 570q0 64 90 64z m-350 0q90 0 90-64l0-570q0-66-90-66t-90 66l0 570q0 64 90 64z" horiz-adv-x="530" />
-
-<glyph glyph-name="record" unicode="&#xe89a;" d="M350 700q146 0 248-102t102-248q0-144-102-247t-248-103-248 103-102 247q0 146 102 248t248 102z" horiz-adv-x="700" />
-
-<glyph glyph-name="to-end" unicode="&#xe89b;" d="M412 374q14-10 14-24 0-12-14-22l-362-228q-22-14-36-5t-14 35l0 442q0 26 14 35t36-5z m114 268q74 0 74-58l0-466q0-58-74-58-76 0-76 58l0 466q0 58 76 58z" horiz-adv-x="600" />
-
-<glyph glyph-name="to-start" unicode="&#xe89c;" d="M174 350q0 14 14 24l364 228q20 14 34 5t14-35l0-442q0-26-14-35t-34 5l-364 228q-14 10-14 22z m-174 234q0 58 76 58 74 0 74-58l0-466q0-58-74-58-76 0-76 58l0 466z" horiz-adv-x="600" />
-
-<glyph glyph-name="fast-forward" unicode="&#xe89d;" d="M866 374q14-10 14-24t-14-22l-372-248q-22-14-37-6t-15 36l0 482q0 28 15 36t37-6z m-454 0q14-10 14-24t-14-22l-360-248q-20-14-36-6t-16 36l0 482q0 28 16 36t36-6z" horiz-adv-x="880" />
-
-<glyph glyph-name="fast-backward" unicode="&#xe89e;" d="M0 350q0 14 14 24l374 248q20 14 36 6t16-36l0-482q0-28-16-36t-36 6l-374 248q-14 8-14 22z m454 0q0 14 14 24l360 248q20 14 36 6t16-36l0-482q0-28-16-36t-36 6l-360 248q-14 8-14 22z" horiz-adv-x="880" />
-
-<glyph glyph-name="progress-0" unicode="&#xe89f;" d="M1000 450l0-250q0-42-29-71t-71-29l-800 0q-40 0-70 29t-30 71l0 300q0 40 30 70t70 30l800 0q42 0 71-30t29-70l0-50z m-100-250l0 300-800 0 0-300 800 0z" horiz-adv-x="1000" />
-
-<glyph glyph-name="progress-1" unicode="&#xe8a0;" d="M1000 450l0-250q0-42-29-71t-71-29l-800 0q-40 0-70 29t-30 71l0 300q0 40 30 70t70 30l800 0q42 0 71-30t29-70l0-50z m-100-250l0 300-800 0 0-300 800 0z m-750 50l0 198 200 0 0-198-200 0z" horiz-adv-x="1000" />
-
-<glyph glyph-name="progress-2" unicode="&#xe8a1;" d="M1000 450l0-250q0-42-29-71t-71-29l-800 0q-40 0-70 29t-30 71l0 300q0 40 30 70t70 30l800 0q42 0 71-30t29-70l0-50z m-100-250l0 300-800 0 0-300 800 0z m-750 50l0 198 200 0 0-198-200 0z m250 0l0 198 200 0 0-198-200 0z" horiz-adv-x="1000" />
-
-<glyph glyph-name="progress-3" unicode="&#xe8a2;" d="M1000 450l0-250q0-42-29-71t-71-29l-800 0q-40 0-70 29t-30 71l0 300q0 40 30 70t70 30l800 0q42 0 71-30t29-70l0-50z m-100-250l0 300-800 0 0-300 800 0z m-750 50l0 198 200 0 0-198-200 0z m250 0l0 198 200 0 0-198-200 0z m250 198l200 0 0-198-200 0 0 198z" horiz-adv-x="1000" />
-
-<glyph glyph-name="target" unicode="&#xe8a3;" d="M430 780q178 0 304-126t126-304-126-304-304-126-304 126-126 304 126 304 304 126z m36-778q124 14 212 102t100 212l-192 0 0 70 192 0q-12 124-100 212t-212 102l0-194-70 0 0 194q-124-14-213-102t-101-212l194 0 0-70-194 0q12-124 101-212t213-102l0 194 70 0 0-194z" horiz-adv-x="860" />
-
-<glyph glyph-name="list" unicode="&#xe8a5;" d="M100 200q20 0 35-15t15-35-15-35-35-15l-50 0q-20 0-35 15t-15 35 14 35 36 15l50 0z m0 200q20 0 35-15t15-35-15-35-35-15l-50 0q-20 0-35 15t-15 35 14 35 36 15l50 0z m0 200q20 0 35-15t15-35-15-35-35-15l-50 0q-20 0-35 15t-15 35 14 35 36 15l50 0z m200-100q-20 0-35 15t-15 35 15 35 35 15l350 0q22 0 36-15t14-35-15-35-35-15l-350 0z m350-100q22 0 36-15t14-35-15-35-35-15l-350 0q-20 0-35 15t-15 35 15 35 35 15l350 0z m0-200q22 0 36-15t14-35-15-35-35-15l-350 0q-20 0-35 15t-15 35 15 35 35 15l350 0z" horiz-adv-x="700" />
-
-<glyph glyph-name="list-add" unicode="&#xe8a6;" d="M350 400q22 0 36-15t14-35-15-35-35-15l-300 0q-20 0-35 15t-15 35 14 35 36 15l300 0z m0-200q22 0 36-15t14-35-15-35-35-15l-300 0q-20 0-35 15t-15 35 14 35 36 15l300 0z m620 200q30 0 30-50t-30-50l-170 0 0-170q0-30-50-30t-50 30l0 170-164 0q-30 0-30 50t30 50l164 0 0 170q0 30 50 30t50-30l0-170 170 0z m-620 200q22 0 36-15t14-35-15-35-35-15l-300 0q-20 0-35 15t-15 35 14 35 36 15l300 0z" horiz-adv-x="1000" />
-
-<glyph glyph-name="battery" unicode="&#xe8a9;" d="M770 350q0-98 36-157t78-59l66 0q-30-46-64-65t-118-19l-500 0q-130 0-199 94t-69 206q0 110 69 205t199 95l500 0q84 0 118-19t64-65l-66 0q-42 0-78-60t-36-156z m-136-90q10 12-8 26-136 134-178 164-16 10-26 13t-18-5-10-12-8-18l-22-56-148 66q-26 12-34 0-8-14 8-28 136-132 180-162 34-16 42-11t18 31l24 58 146-68q26-12 34 2z m310 192q22 0 39-27t17-71-17-72-39-28l-38 0q-22 0-38 28t-16 72 16 71 38 27l38 0z" horiz-adv-x="1000" />
-
-<glyph glyph-name="back-in-time" unicode="&#xe8aa;" d="M532 760q170 0 289-120t119-290-119-290-289-120q-138 0-252 88l70 76q82-60 182-60 126 0 216 90t90 216q0 128-90 218t-216 90q-124 0-213-86t-93-210l142 0-184-206-184 206 124 0q4 166 123 282t285 116z m-36-190l70 0 0-204 130-130-50-50-150 150 0 234z" horiz-adv-x="940" />
-
-<glyph glyph-name="monitor" unicode="&#xe8ab;" d="M900 790q42 0 71-30t29-70l0-550q0-42-29-77t-69-43l-218-44 86-38q50-28-20-28l-500 0q-98 0 32 52l36 14-220 44q-40 8-69 43t-29 77l0 550q0 40 30 70t70 30l800 0z m0-646l0 556-800 0 0-556 800 0z" horiz-adv-x="1000" />
-
-<glyph glyph-name="mobile" unicode="&#xe8ac;" d="M480 840q42 0 71-29t29-71l0-780q0-40-29-70t-71-30l-380 0q-40 0-70 30t-30 70l0 780q0 42 30 71t70 29l380 0z m-190-940q30 0 50 15t20 35q0 22-20 36t-50 14q-28 0-49-15t-21-35 21-35 49-15z m210 150l0 660-420 0 0-660 420 0z" horiz-adv-x="580" />
-
-<glyph glyph-name="cd" unicode="&#xe8ae;" d="M460 810q190 0 325-135t135-325-135-325-325-135-325 135-135 325 135 325 325 135z m0-610q62 0 106 44t44 106q0 64-43 107t-107 43q-62 0-106-44t-44-106 44-106 106-44z" horiz-adv-x="920" />
-
-<glyph glyph-name="inbox" unicode="&#xe8af;" d="M967 398q40-42 30-72l-28-154q-4-20-22-33t-40-13l-816 0q-22 0-40 13t-22 33l-28 154q-8 32 32 72 8 10 36 38t68 67 52 51q22 22 52 22l516 0q30 0 52-22 16-16 53-52t67-65 38-39z m-266-32l178 0-102 114-556 0-102-114 178 0q8 0 12-8l40-100 300 0 40 100q4 8 12 8z" horiz-adv-x="999" />
-
-<glyph glyph-name="install" unicode="&#xe8b0;" d="M884 306q24-52 14-96l-34-184q-2-20-19-35t-39-15l-712 0q-22 0-39 15t-19 35l-34 184q-8 50 14 96l158 374q22 46 72 46l104 0-20-204-134 0 254-210 256 210-136 0-18 204 102 0q50 0 74-46z m-68-132q2 22-10 38t-34 16l-644 0q-22 0-34-16t-10-38l14-74q2-22 19-37t37-15l592 0q22 0 39 15t19 37z" horiz-adv-x="901" />
-
-<glyph glyph-name="globe" unicode="&#xe8b1;" d="M480 830q200 0 340-141t140-339q0-200-140-340t-340-140q-198 0-339 140t-141 340q0 198 141 339t339 141z m410-480q0 132-78 239t-202 149q-18-24-16-32 4-38 18-51t30-7l32 12t20 2q22-24 0-47t-45-56-1-77q34-64 96-64 28-2 43-36t17-66q10-80-14-140-22-44 14-76 86 112 86 250z m-466 404q-112-14-199-84t-127-174q6 0 22-2t28-3 26-4 24-8 12-13q4-12-14-45t-18-61q0-30 38-56t38-46q0-28 8-68t8-44q0-12 36-54t52-42q10 0 11 22t-2 54-3 40q0 32 14 74 12 42 59 70t55 46q16 34 9 61t-17 43-34 28-41 17-37 9-22 4q-16 6-42 7t-36-3-27 11-17 29q0 10 15 27t35 37 28 30q8 14 17 21t22 16 27 21q4 4 25 17t27 23z m-72-794q66-20 128-20 128 0 226 68-26 44-118 34-24-2-65-17t-47-17q-74-16-76-16-12-2-26-14t-22-18z" horiz-adv-x="960" />
-
-<glyph glyph-name="cloud" unicode="&#xe8b2;" d="M760 494q100 0 170-68t70-166-70-166-170-68l-578 0q-74 0-128 52t-54 124q0 74 53 126t129 52q2 0 10-1t10-1q-2 12-2 38 0 108 78 184t188 76q90 0 160-52t94-134q28 4 40 4z" horiz-adv-x="1000" />
-
-<glyph glyph-name="cloud-thunder" unicode="&#xe8b3;" d="M760 494q100 0 170-68t70-166-70-166-170-68l-578 0q-74 0-128 52t-54 124q0 74 53 126t129 52q2 0 10-1t10-1q-2 12-2 38 0 108 78 184t188 76q90 0 160-52t94-134q28 4 40 4z m-192-216q14 16 14 30 0 20-30 32l-4 0q-26 14-38 16l50 116q6 0 6 20 0 14-8 18-16 10-34-8-2-2-30-32t-61-66-45-52q-12-18-12-30 0-22 30-30l4-2q8-4 38-16l-52-114-2-8q-2-8-2-14 0-10 8-18 18-10 34 10 100 100 134 148z" horiz-adv-x="1000" />
-
-<glyph glyph-name="flash" unicode="&#xe8b4;" d="M40-100q-4 4 35 94t79 182 38 98-94 45-98 55q-4 12 84 120t180 209 96 97q6-4-74-186t-78-186 95-43 97-57q4-20-174-227t-186-201z" horiz-adv-x="400" />
-
-<glyph glyph-name="moon" unicode="&#xe8b5;" d="M524 238q106 106 125 252t-53 270q52-26 96-72 128-128 128-309t-128-309-310-128-310 128q-40 40-72 94 124-70 271-51t253 125z" horiz-adv-x="820" />
-
-<glyph glyph-name="flight" unicode="&#xe8b6;" d="M268-120l124 400-180 0-112-100-100 0 80 170-80 170 100 0 112-100 180 0-124 400 100 0 224-400 274 0t36-4 46-11 36-21 16-34q0-32-38-49t-74-19l-38-2-258 0-224-400-100 0z" horiz-adv-x="1000" />
-
-<glyph glyph-name="paper-plane" unicode="&#xe8b7;" d="M894 720q14 4 22-3t4-19q-2-6-72-310t-74-316q-2-14-14-19t-24 1l-248 134-30 16 22 26q388 420 394 426 4 4-1 9t-9 1l-550-402-112 44-190 76q-12 4-12 12t12 12q8 4 441 157t441 155z m-582-728l0 204 160-82q-130-116-142-128-18-14-18 6z" horiz-adv-x="921" />
-
-<glyph glyph-name="leaf" unicode="&#xe8b8;" d="M236 646q182 106 506 66 168-22 196-50 4-6-2-10-76-40-130-109t-78-132-65-132-93-105q-138-96-382-4-66-76-114-176-12-24-47-7t-25 39q44 100 129 193t176 153 176 106 141 68l54 20q-14 0-41-1t-104-14-148-38-162-84-161-141q-22 242 174 358z" horiz-adv-x="940" />
-
-<glyph glyph-name="lifebuoy" unicode="&#xe8b9;" d="M454 810q190 2 326-130t140-322q2-190-131-327t-323-141q-190-2-327 131t-139 323q-4 190 130 327t324 139z m0-60q-94 0-178-44l62-104q56 28 122 28t122-28l62 104q-88 46-190 44z m-246-522q-28 60-28 122 0 64 28 124l-102 62q-46-88-46-190 2-96 46-180z m258-278q98 4 178 46l-62 104q-60-30-122-30t-122 30l-62-104q86-46 190-46z m-6 180q92 0 156 65t64 155q0 92-64 156t-156 64-156-64-64-156q0-90 64-155t156-65z m252 98l104-62q46 96 44 190 0 96-44 180l-104-62q28-60 28-124 0-62-28-122z" horiz-adv-x="920" />
-
-<glyph glyph-name="mouse" unicode="&#xe8ba;" d="M551 130q28-80-17-157t-139-111q-94-28-175 9t-103 117l-106 384q-20 68 6 134t84 106l-96 186q-14 34 14 48 30 18 48-14l98-192q80 22 154-16t102-116z m-324 274q28 10 40 36t4 54q-10 28-35 41t-53 5q-28-10-40-36t-4-54q10-28 35-41t53-5z" horiz-adv-x="561" />
-
-<glyph glyph-name="briefcase" unicode="&#xe8bb;" d="M456 326l0-100-456 0q8 226 10 292 4 108 100 108l160 0q16 26 37 67t23 45q14 26 23 32t37 6l222 0q26 0 36-7t22-31q18-32 60-112l160 0q96 0 100-108l10-292-454 0 0 100-90 0z m-74 354l-28-54 292 0-28 54q-14 26-42 26l-152 0q-28 0-42-26z m164-604l0 100 430 0q-6-88-10-166-6-84-90-84l-750 0q-90 0-90 84l-10 166 430 0 0-100 90 0z" horiz-adv-x="1000" />
-
-<glyph glyph-name="suitcase" unicode="&#xe8bc;" d="M900 650q42 0 71-30t29-70l0-550q0-42-29-71t-71-29l-50 0 0 750 50 0z m-900-100q0 40 30 70t70 30l50 0 0-750-50 0q-40 0-70 29t-30 71l0 550z m670 204l0-104 110 0 0-750-560 0 0 750 110 0 0 104q98 46 170 46t170-46z m-60-104l0 66q-52 24-110 24-54 0-110-24l0-66 220 0z" horiz-adv-x="1000" />
-
-<glyph glyph-name="dot" unicode="&#xe8bd;" d="M110 460q46 0 78-32t32-78q0-44-32-77t-78-33-78 33-32 77q0 46 32 78t78 32z" horiz-adv-x="220" />
-
-<glyph glyph-name="dot-2" unicode="&#xe8be;" d="M110 460q46 0 78-32t32-78q0-44-32-77t-78-33-78 32-32 78 32 78 78 32z m350 0q46 0 78-32t32-78q0-44-33-77t-77-33q-46 0-78 32t-32 78 32 78 78 32z" horiz-adv-x="570" />
-
-<glyph glyph-name="dot-3" unicode="&#xe8bf;" d="M110 460q46 0 78-32t32-78q0-44-32-77t-78-33-78 33-32 77q0 46 32 78t78 32z m350 0q46 0 78-32t32-78q0-44-33-77t-77-33-77 33-33 77q0 46 32 78t78 32z m350 0q46 0 78-32t32-78q0-44-32-77t-78-33-78 33-32 77q0 46 32 78t78 32z" horiz-adv-x="920" />
-
-<glyph glyph-name="brush" unicode="&#xe8c0;" d="M118 170q38 34 85 29t87-45q42-40 48-87t-30-83q-86-84-228-102-84-12-80 14 0 4 6 10 52 60 64 145t48 119z m840 646q26-26-148-248t-292-338q-38-38-124-104-8-6-16 8-18 34-48 64-32 32-66 48-16 6-8 16 64 84 104 122 118 116 344 287t254 145z" horiz-adv-x="962" />
-
-<glyph glyph-name="infinity" unicode="&#xe8c2;" d="M796 570q84 0 144-53t60-167q0-112-60-166t-144-54q-78 0-157 40t-139 106q-58-66-137-106t-157-40q-86 0-146 54t-60 166q0 114 60 167t146 53q78 0 157-39t137-105q58 66 138 105t158 39z m-590-352q60 0 127 37t113 95q-46 58-112 95t-128 37q-114 0-114-132t114-132z m590 0q114 0 114 132t-114 132q-62 0-129-37t-111-95q44-58 111-95t129-37z" horiz-adv-x="1000" />
-
-<glyph glyph-name="erase" unicode="&#xe8c3;" d="M902 700q42 0 71-29t29-71l0-500q0-40-29-70t-71-30l-478 0q-38 0-70 28l-340 296q-28 26 0 54l340 296q30 26 70 26l478 0z m-140-550l72 74-128 126 128 128-72 72-128-126-128 126-72-72 128-128-128-126 72-74 128 128z" horiz-adv-x="1002" />
-
-<glyph glyph-name="chart-pie" unicode="&#xe8c4;" d="M368 770l0-368-368 0q18 146 121 249t247 119z m106 0q156-20 261-139t105-279q0-174-123-298t-299-124q-160 0-278 105t-140 263l424 0q20 0 35 14t15 36l0 422z" horiz-adv-x="840" />
-
-<glyph glyph-name="chart-line" unicode="&#xe8c5;" d="M34 284q-42 10-32 56 10 42 54 32l98-24-52-80z m890-12q14 12 33 11t31-15q32-32-2-64l-252-226q-12-12-30-12-14 0-28 10l-286 220-54 14 50 80 36-8q12-4 16-8l264-204z m-490 220l-350-550q-12-22-38-22-12 0-24 8-16 10-20 29t6 33l374 588q8 16 28 20 18 6 36-6l246-156 226 326q10 16 28 19t34-9q38-24 12-62l-252-362q-24-36-62-12z" horiz-adv-x="1003" />
-
-<glyph glyph-name="chart-bar" unicode="&#xe8c6;" d="M750 800q22 0 36-15t14-35l0-850-200 0 0 850q0 50 40 50l110 0z m-300-300q22 0 36-15t14-35l0-550-200 0 0 550q0 50 40 50l110 0z m-300-300q22 0 36-15t14-35l0-250-200 0 0 250q0 50 40 50l110 0z" horiz-adv-x="800" />
-
-<glyph glyph-name="chart-area" unicode="&#xe8c7;" d="M964 732q16 22 16-4l0-768-964 0q-12 0-15 7t5 17l230 288q20 22 40 2l74-66q10-8 21-7t17 11l158 238q16 26 38 4l112-104q20-20 38 4z" horiz-adv-x="980" />
-
-<glyph glyph-name="tape" unicode="&#xe8c8;" d="M770 580q96 0 163-67t67-163q0-94-67-162t-163-68l-540 0q-94 0-162 68t-68 162q0 96 68 163t162 67q96 0 163-67t67-163q0-72-40-130l160 0q-40 64-40 130 0 96 68 163t162 67z m-670-230q0-52 38-91t92-39 92 39 38 91q0 54-38 92t-92 38-92-38-38-92z m670-130q54 0 92 39t38 91q0 54-38 92t-92 38-92-38-38-92q0-52 38-91t92-39z" horiz-adv-x="1000" />
-
-<glyph glyph-name="graduation-cap" unicode="&#xe8c9;" d="M166 238l334-168 276 136q-4-22-8-47t-6-35-11-23-24-23-45-22q-40-18-80-41t-63-34-39-11-40 13-64 37-80 40q-72 32-103 69t-47 109z m810 246q24-14 24-33t-24-33l-78-44-308 102q-22 36-90 36-40 0-67-16t-27-40 27-40 67-16q26 0 36 4l292-68-268-152q-60-32-120 0l-416 234q-24 14-24 33t24 33l416 234q60 32 120 0z m-128-442q18 116 13 182t-19 90l-14 22 70 38q6-8 12-28t17-101-7-197q-4-26-22-30t-35 5-15 19z" horiz-adv-x="1000" />
-
-<glyph glyph-name="language" unicode="&#xe8ca;" d="M988 306q30-82-10-176t-134-160q-10 0-12 2t-16 19-16 19q-2 6 2 10 86 60 117 152t-11 148q-16-38-39-76t-59-80-86-65-106-15q-52 6-84 41t-32 93q0 84 60 148 50 50 114 66l-2 100q-140-24-146-24-6-2-10 4 0 2-5 29t-5 31q-2 2 1 4t7 2l156 28q0 110-2 114 0 8 8 8 46 0 52 2 10 0 10-8l0-104q158 22 164 22 8 4 10-6 0-2 4-23t4-25q4-10-4-12l-176-30 0-102 12 0q86 0 148-36t86-100z m-370-160q28-6 62 6l-4 214q-34-12-60-40-44-44-44-108 0-66 46-72z m122 28q28 24 58 68t45 79 7 41q-36 18-96 18-2 0-6-1t-6-1z m-448 382q10-28 53-165t83-261 40-126q0-4-4-4l-86 0q-6 0-6 4l-50 166-176 0q-48-164-50-166 0-4-6-4l-86 0q-4 0-4 4 10 18 176 552 2 8 10 8l96 0q10 0 10-8z m-130-316l144 0-72 264z" horiz-adv-x="1001" />
-
-<glyph glyph-name="ticket" unicode="&#xe8cb;" d="M216 272l326 326 178-178-326-326z m710 244q14-14 14-36t-14-36l-550-550q-16-16-36-16t-36 16l-76 76q12 20 12 48 0 42-29 72t-71 30q-22 0-50-14l-74 76q-16 16-16 36t16 36l550 550q14 14 36 14t36-14l74-76q-12-22-12-48 0-42 30-71t72-29q26 0 48 12z m-532-502l406 406-258 258-408-406z" horiz-adv-x="940" />
-
-<glyph glyph-name="water" unicode="&#xe8cc;" d="M168 844q10-86 50-155t73-123 33-112q0-66-48-113t-114-47-114 47-48 113q0 58 33 112t73 123 50 155q2 4 7 4t5-4z m616 0q10-86 50-155t73-123 33-112q0-66-48-113t-114-47-114 47-48 113q0 48 21 93t48 78 53 92 34 127q2 4 7 4t5-4z m-320-444q2 4 7 4t5-4q10-86 50-155t73-123 33-112q0-66-48-113t-114-47-114 47-48 113q0 58 33 112t73 123 50 155z" horiz-adv-x="940" />
-
-<glyph glyph-name="droplet" unicode="&#xe8cd;" d="M290 822q14-118 60-219t92-159 82-136 36-160q0-114-83-196t-197-82-197 82-83 196q0 82 36 160t82 136 92 159 60 219q2 8 11 8t9-8z m-42-392q2 4-2 14-6 6-14 6t-12-6l-40-58q-32-46-48-70t-34-75-18-101q0-24 17-41t41-17q58 0 58 68 0 94 42 246 2 6 5 17t5 17z" horiz-adv-x="560" />
-
-<glyph glyph-name="air" unicode="&#xe8ce;" d="M85 534q-16-14-36-12t-34 18q-14 14-12 36t18 36q48 40 79 60t89 40 129 4 159-66 155-53 100 16 89 67q38 30 70-6 32-40-6-72-122-110-234-110-100 0-222 70-68 38-119 52t-93 0-65-29-67-51z m736-110q38 32 70-6 32-40-6-72-40-34-65-53t-72-38-97-19q-96 0-222 70-68 38-119 52t-93 0-65-29-67-51q-14-14-35-12t-35 18q-32 40 6 72 38 34 60 50t69 38 88 23 105-15 134-56q68-38 119-52t93 0 65 29 67 51z m0-256q38 32 70-6 14-14 12-36t-18-36q-40-34-65-53t-72-38-97-19q-96 0-222 70-68 38-119 52t-93 1-66-29-66-52q-14-14-35-12t-35 18q-32 40 6 72 38 34 60 50t69 38 88 23 105-15 134-56q68-38 119-52t93 0 65 29 67 51z" horiz-adv-x="905" />
-
-<glyph glyph-name="credit-card" unicode="&#xe8cf;" d="M900 700q42 0 71-30t29-70l0-500q0-42-29-71t-71-29l-800 0q-40 0-70 29t-30 71l0 500q0 40 30 70t70 30l800 0z m0-600l0 300-800 0 0-300 800 0z m0 450l0 50-800 0 0-50 800 0z m-700-256l30 0 0-30-30 0 0 30z m180-60l30 0 0 30 30 0 0 30 60 0 0-30-30 0 0-30-30 0 0-30-60 0 0 30z m120-30l-30 0 0 30 30 0 0-30z m-150 0l-60 0 0 30 60 0 0-30z m30 60l0-30-30 0 0 60 60 0 0-30-30 0z m-120-30l0-30-60 0 0 30 30 0 0 30 30 0 0 30 60 0 0-30-30 0 0-30-30 0z" horiz-adv-x="1000" />
-
-<glyph glyph-name="floppy" unicode="&#xe8d0;" d="M658 750l142-156 0-544q0-40-29-70t-71-30l-600 0q-40 0-70 30t-30 70l0 600q0 42 30 71t70 29l558 0z m-58-300l0 250-400 0 0-250q0-20 15-35t35-15l300 0q20 0 35 15t15 35z m-50 200l0-200-100 0 0 200 100 0z" horiz-adv-x="800" />
-
-<glyph glyph-name="clipboard" unicode="&#xe8d1;" d="M630 750q28 0 49-21t21-49l0-760q0-30-21-50t-49-20l-560 0q-28 0-49 20t-21 50l0 760q0 28 21 49t49 21l60-150 440 0z m-100-100l-360 0-44 100 108 0 36 100 160 0 36-100 110 0z" horiz-adv-x="700" />
-
-<glyph glyph-name="megaphone" unicode="&#xe8d2;" d="M792 500q58-138 67-258t-39-140q-28-12-61 3t-65 40-99 41-149 8q-28-4-42-19t-6-37q22-56 46-108 4-10 24-22t24-20q14-34-22-46-50-22-102-40-30-10-54 42-32 76-58 132-6 12-34 17t-46 31q-30-10-38-14-34-12-74 12t-54 60q-17 32-5 79t43 61q126 52 213 108t124 103 59 92 25 78 15 59 36 36q48 20 130-70t142-228z m-28-300q8 4 10 38t-11 98-41 128q-28 66-67 123t-67 84-36 23-10-42 10-105 40-133 68-119 68-76 36-19z" horiz-adv-x="860" />
-
-<glyph glyph-name="database" unicode="&#xe8d3;" d="M686 208q14 20 14-2l0-100q0-74-104-135t-246-61q-140 0-245 61t-105 135l0 100q0 8 4 10t10-8q32-52 125-86t211-34 211 34 125 86z m2 254q8 16 12 0l0-116q0-68-102-114t-248-46q-144 0-247 46t-103 114l0 116q0 20 14 0 30-46 124-75t212-29 212 29 126 75z m-338 328q144 0 247-39t103-93l0-64q0-58-103-99t-247-41-247 41-103 99l0 64q0 54 103 93t247 39z" horiz-adv-x="700" />
-
-<glyph glyph-name="drive" unicode="&#xe8d4;" d="M884 304q26-44 14-96l-34-184q-2-20-19-35t-39-15l-712 0q-20 0-38 15t-20 35l-34 184q-8 52 14 96l158 374q22 46 72 46l408 0q50 0 74-46z m-68-132q2 22-10 38t-34 16l-644 0q-22 0-34-16t-10-38l14-74q2-22 19-37t39-15l590 0q22 0 39 15t19 37z" horiz-adv-x="902" />
-
-<glyph glyph-name="bucket" unicode="&#xe8d5;" d="M522 780q174 0 286-49t104-105q-6-38-48-307t-44-281q-2-18-37-44t-107-50-154-24-153 24-106 50-37 44q0 2-4 30 82-6 163 35t139 117q28 0 48 20t20 50q0 28-20 49t-50 21q-28 0-49-21t-21-49q0-20 10-36-48-58-115-89t-131-27q-102 10-157 57t-59 109q-8 122 156 184-18 94-22 138-8 56 104 105t284 49z m-452-470q4-32 37-59t91-39l-32 204q-100-44-96-106z m452 212q82 0 157 18t113 39 38 35-38 35-112 39-158 18q-82 0-156-18t-112-39-38-35 38-35 112-39 156-18z" horiz-adv-x="913" />
-
-<glyph glyph-name="thermometer" unicode="&#xe8d6;" d="M400 356q64-36 102-98t38-138q0-112-79-191t-191-79-191 79-79 191q0 76 38 138t102 98l0 444q0 50 40 50l170 0q20 0 35-15t15-35l0-444z m-130-406q70 0 120 50t50 120q0 56-32 100t-84 60l0 370-100 0 0-368q-54-16-89-61t-35-101q0-70 50-120t120-50z" horiz-adv-x="540" />
-
-<glyph glyph-name="key" unicode="&#xe8d7;" d="M774 612q20-116-28-215t-150-117q-66-12-130-2l-118-194-70-12-104-166q-14-28-46-32l-76-14q-12-4-22 4t-12 22l-16 98q-8 30 12 56l258 386q-24 50-38 120-18 106 53 187t185 101q106 20 195-45t107-177z m-126-76q30 44 21 97t-51 83q-42 32-92 22t-80-54q-8-12-12-23t-1-20 5-16 13-17 18-15 22-16 23-17q6-4 22-16t23-16 19-12 19-8 17 1 18 8 16 19z" horiz-adv-x="780" />
-
-<glyph glyph-name="flow-cascade" unicode="&#xe8d8;" d="M520 120q50 0 85-35t35-85-35-85-85-35q-80 0-110 74l-164 0q-88 0-131 54t-43 118l0 464q-72 34-72 110 0 50 35 85t85 35 85-35 35-85q0-76-72-110l0-114q0-78 78-78l164 0q30 72 110 72 50 0 85-35t35-85-35-85-85-35q-80 0-110 74l-164 0q-42 0-78 16l0-194q0-78 78-78l164 0q30 72 110 72z m0 300q-28 0-49-20t-21-50q0-28 21-48t49-20 49 20 21 48q0 30-21 50t-49 20z m-470 280q0-28 21-48t49-20 49 20 21 48q0 30-21 50t-49 20-49-20-21-50z m470-768q28 0 49 20t21 48q0 30-21 50t-49 20-49-20-21-50q0-28 21-48t49-20z" horiz-adv-x="640" />
-
-<glyph glyph-name="flow-branch" unicode="&#xe8d9;" d="M640 650q0-80-74-110-6-58-28-101t-61-69-68-38-75-26q-42-14-63-22t-47-24-38-40-16-60q70-30 70-110 0-50-35-85t-85-35-85 35-35 85q0 78 72 112l0 378q-72 34-72 110 0 50 35 85t85 35 85-35 35-85q0-76-72-110l0-204q40 30 138 60 58 18 84 29t51 41 29 76q-70 32-70 108 0 50 35 85t85 35 85-35 35-85z m-588 0q0-28 20-48t48-20 49 20 21 48q0 30-21 50t-49 20-48-20-20-50z m68-668q28 0 49 20t21 48q0 30-21 50t-49 20-48-20-20-50q0-28 20-48t48-20z m400 600q28 0 49 20t21 48q0 30-21 50t-49 20-48-20-20-50q0-28 20-48t48-20z" horiz-adv-x="640" />
-
-<glyph glyph-name="flow-tree" unicode="&#xe8da;" d="M868 112q72-34 72-112 0-50-35-85t-85-35-85 35-35 85q0 78 72 112l0 114q0 78-76 78l-100 0q-44 0-78 12l0-204q72-34 72-112 0-50-35-85t-85-35-85 35-35 85q0 78 72 112l0 204q-30-12-76-12l-100 0q-34 0-53-19t-22-33-3-26l0-114q72-34 72-112 0-50-35-85t-85-35-85 35-35 85q0 78 72 112l0 114q0 64 43 118t131 54l100 0q76 0 76 52l0 140q-72 34-72 110 0 50 35 85t85 35 85-35 35-85q0-76-72-110l0-140q0-52 78-52l100 0q86 0 129-54t43-118l0-114z m-678-112q0 30-21 50t-49 20-48-20-20-50q0-28 20-48t48-20 49 20 21 48z m212 700q0-28 20-48t48-20 49 20 21 48q0 30-21 50t-49 20-48-20-20-50z m138-700q0 30-21 50t-49 20-48-20-20-50q0-28 20-48t48-20 49 20 21 48z m280-68q28 0 49 20t21 48q0 30-21 50t-49 20-48-20-20-50q0-28 20-48t48-20z" horiz-adv-x="940" />
-
-<glyph glyph-name="flow-line" unicode="&#xe8db;" d="M168 162q72-34 72-112 0-50-35-85t-85-35-85 35-35 85q0 78 72 112l0 378q-72 34-72 110 0 50 35 85t85 35 85-35 35-85q0-76-72-110l0-378z m-116 488q0-28 20-48t48-20 49 20 21 48q0 30-21 50t-49 20-48-20-20-50z m68-668q28 0 49 20t21 48q0 30-21 50t-49 20-48-20-20-50q0-28 20-48t48-20z" horiz-adv-x="240" />
-
-<glyph glyph-name="flow-parallel" unicode="&#xe8dc;" d="M240 650q0-76-72-110l0-378q72-34 72-112 0-50-35-85t-85-35-85 35-35 85q0 78 72 112l0 378q-72 34-72 110 0 50 35 85t85 35 85-35 35-85z m-50-600q0 30-21 50t-49 20-48-20-20-50q0-28 20-48t48-20 49 20 21 48z m-70 532q28 0 49 20t21 48q0 30-21 50t-49 20-48-20-20-50q0-28 20-48t48-20z m448-420q72-34 72-112 0-50-35-85t-85-35-85 35-35 85q0 78 72 112l0 378q-72 34-72 110 0 50 35 85t85 35 85-35 35-85q0-76-72-110l0-378z m-116 488q0-28 20-48t48-20 49 20 21 48q0 30-21 50t-49 20-48-20-20-50z m68-668q28 0 49 20t21 48q0 30-21 50t-49 20-48-20-20-50q0-28 20-48t48-20z" horiz-adv-x="640" />
-
-<glyph glyph-name="rocket" unicode="&#xe8dd;" d="M543 236q6-50 8-81t-8-59-13-40-35-32-45-26-70-31-85-37q-32-12-45 4t-3 44l40 110-130 132-106-40q-28-12-43 2t-3 46q12 30 31 79t27 65 22 45 25 36 29 20 41 13l52 0t71-6q10 14 29 39t77 85 118 104 145 75 165 19q8 0 14-6 4-4 6-14 10-82-18-168t-76-151-98-118-86-81z m50 296q22-22 54-22t54 22q22 24 22 56t-22 56q-22 22-54 22t-54-22q-22-24-22-56t22-56z" horiz-adv-x="860" />
-
-<glyph glyph-name="gauge" unicode="&#xe8de;" d="M406 178q34 56 214 284t194 220q12-6-96-278t-138-326q-50-86-136-36t-38 136z m94 380q-168 0-284-127t-116-311q0-30 2-46 2-22-12-37t-34-17-36 12-18 34q0 8-1 26t-1 28q0 226 145 382t355 156q72 0 134-18l-70-86q-40 4-64 4z m362-62q138-154 138-376 0-38-2-56-2-20-16-33t-34-13l-4 0q-22 4-35 20t-11 36q2 14 2 46 0 150-80 268 6 14 20 51t22 57z" horiz-adv-x="1000" />
-</font>
-</defs>
-</svg>

src/mol-plugin-ui/state/actions.tsx

@@ -9,6 +9,7 @@ import { State } from '../../mol-state';
 import { PluginUIComponent } from '../base';
 import { Icon } from '../controls/icons';
 import { ApplyActionControl } from './apply-action';
+import { Code } from '@material-ui/icons';
 
 export class StateObjectActions extends PluginUIComponent<{ state: State, nodeRef: string, hideHeader?: boolean, initiallyCollapsed?: boolean, alwaysExpandFirst?: boolean }> {
     get current() {
@@ -41,88 +42,10 @@ export class StateObjectActions extends PluginUIComponent<{ state: State, nodeRe
         const display = cell.obj ? cell.obj.label : (def.display && def.display.name) || def.name;
 
         return <div className='msp-state-actions'>
-            {!this.props.hideHeader && <div className='msp-section-header'><Icon name='code' /> {`Actions (${display})`}</div> }
+            {!this.props.hideHeader && <div className='msp-section-header'><Icon svg={Code} /> {`Actions (${display})`}</div> }
             {actions.map((act, i) => <ApplyActionControl
                 key={`${act.id}`} state={state} action={act} nodeRef={ref}
                 initiallyCollapsed={i === 0 ? !this.props.alwaysExpandFirst && this.props.initiallyCollapsed : this.props.initiallyCollapsed} />)}
         </div>;
     }
-}
-
-// interface StateObjectActionSelectProps {
-//     plugin: PluginContext,
-//     state: State,
-//     nodeRef: string
-// }
-
-// interface StateObjectActionSelectState {
-//     state: State,
-//     nodeRef: string,
-//     version: string,
-//     actions: readonly StateAction[],
-//     currentActionIndex: number
-// }
-
-// function createStateObjectActionSelectState(props: StateObjectActionSelectProps): StateObjectActionSelectState {
-//     const cell = props.state.cells.get(props.nodeRef)!;
-//     const actions = [...props.state.actions.fromCell(cell, props.plugin)];
-//     actions.sort((a, b) => a.definition.display.name < b.definition.display.name ? -1 : a.definition.display.name === b.definition.display.name ? 0 : 1);
-//     return {
-//         state: props.state,
-//         nodeRef: props.nodeRef,
-//         version: cell.transform.version,
-//         actions,
-//         currentActionIndex: -1
-//     }
-// }
-
-// export class StateObjectActionSelect extends PluginUIComponent<StateObjectActionSelectProps, StateObjectActionSelectState> {
-//     state = createStateObjectActionSelectState(this.props);
-
-//     get current() {
-//         return this.plugin.state.behavior.currentObject.value;
-//     }
-
-//     static getDerivedStateFromProps(props: StateObjectActionSelectProps, state: StateObjectActionSelectState) {
-//         if (state.state !== props.state || state.nodeRef !== props.nodeRef) return createStateObjectActionSelectState(props);
-//         const cell = props.state.cells.get(props.nodeRef)!;
-//         if (cell.transform.version !== state.version) return createStateObjectActionSelectState(props);
-//         return null;
-//     }
-
-//     componentDidMount() {
-//         // TODO: handle tree change: some state actions might become invalid
-//         // this.subscribe(this.props.state.events.changed, o => {
-//         //     this.setState(createStateObjectActionSelectState(this.props));
-//         // });
-
-//         this.subscribe(this.plugin.events.state.object.updated, ({ ref, state }) => {
-//             const current = this.current;
-//             if (current.ref !== ref || current.state !== state) return;
-//             this.setState(createStateObjectActionSelectState(this.props));
-//         });
-//     }
-
-//     onChange =  (e: React.ChangeEvent<HTMLSelectElement>) => {
-//         this.setState({ currentActionIndex: parseInt(e.target.value, 10) });
-//     }
-
-//     render() {
-//         const actions = this.state.actions;
-//         if (actions.length === 0) return null;
-
-//         const current = this.state.currentActionIndex >= 0 && actions[this.state.currentActionIndex];
-//         const title = current ? current.definition.display.description : 'Select Action';
-
-//         return <>
-//             <div className='msp-contol-row msp-action-select'>
-//                 <select className='msp-form-control' title={title} value={this.state.currentActionIndex} onChange={this.onChange} style={{ fontWeight: 'bold' }}>
-//                     <option key={-1} value={-1} style={{ color: '#999' }}>[ Select Action ]</option>
-//                     {actions.map((a, i) => <option key={i} value={i}>{a.definition.display.name}</option>)}
-//                 </select>
-//                 <Icon name='flow-tree' />
-//             </div>
-//             {current && <ApplyActionControl key={current.id} plugin={this.plugin} state={this.props.state} action={current} nodeRef={this.props.nodeRef} hideHeader />}
-//         </>;
-//     }
-// }
+}

src/mol-plugin-ui/state/animation.tsx

@@ -9,13 +9,14 @@ import { PluginUIComponent } from '../base';
 import { ParameterControls, ParamOnChange } from '../controls/parameters';
 import { Icon } from '../controls/icons';
 import { Button } from '../controls/common';
+import { Code, PlayArrow } from '@material-ui/icons';
 
 export class AnimationControlsWrapper extends PluginUIComponent<{ }> {
     render() {
         const anim = this.plugin.state.animation;
         if (anim.isEmpty) return null;
         return <div className='msp-controls-section'>
-            <div className='msp-section-header'><Icon name='code' /> Animations</div>
+            <div className='msp-section-header'><Icon svg={Code} /> Animations</div>
             <AnimationControls />
         </div>;
     }
@@ -54,7 +55,7 @@ export class AnimationControls extends PluginUIComponent<{ onStart?: () => void
             <ParameterControls params={anim.current.params} values={anim.current.paramValues} onChange={this.updateCurrentParams} isDisabled={isDisabled} />
 
             <div className='msp-flex-row'>
-                <Button icon={anim.state.animationState !== 'playing' ? void 0 : 'play'} onClick={this.startOrStop}>
+                <Button icon={anim.state.animationState !== 'playing' ? void 0 : PlayArrow} onClick={this.startOrStop}>
                     {anim.state.animationState === 'playing' ? 'Stop' : 'Start'}
                 </Button>
             </div>

src/mol-plugin-ui/state/common.tsx

@@ -11,8 +11,9 @@ import { ParameterControls, ParamOnChange } from '../controls/parameters';
 import { PluginContext } from '../../mol-plugin/context';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { Subject } from 'rxjs';
-import { Icon, IconName } from '../controls/icons';
-import { ExpandGroup, ToggleButton, Button } from '../controls/common';
+import { Icon } from '../controls/icons';
+import { ExpandGroup, ToggleButton, Button, IconButton } from '../controls/common';
+import { Refresh, ArrowRight, ArrowDropDown, Check, Tune } from '@material-ui/icons';
 
 export { StateTransformParameters, TransformControlBase };
 
@@ -101,7 +102,7 @@ namespace TransformControlBase {
     }
 
     export interface CommonProps {
-        simpleApply?: { header: string, icon: IconName, title?: string },
+        simpleApply?: { header: string, icon?: React.FC, title?: string },
         noMargin?: boolean,
         applyLabel?: string,
         onApply?: () => void,
@@ -194,13 +195,9 @@ abstract class TransformControlBase<P, S extends TransformControlBase.ComponentS
         if (this.props.autoHideApply && (!canApply || this.canAutoApply(this.state.params))) return null;
 
         return <div className='msp-transform-apply-wrap'>
-            <button className='msp-btn msp-btn-block msp-form-control msp-transform-default-params' onClick={this.setDefault} disabled={this.state.busy} title='Set default params'><Icon name='cw' /></button>
-            {/* {showBack && <Button className='msp-btn msp-btn-block msp-form-control msp-transform-refresh msp-form-control' title='Refresh params' onClick={this.refresh} disabled={this.state.busy || this.state.isInitial}>
-                <Icon name='back' /> Back
-            </Button>}
-            <div className={`msp-transform-apply${!showBack ? ' msp-transform-apply-wider' : ''}`}> */}
+            <IconButton svg={Refresh} className='msp-transform-default-params' onClick={this.setDefault} disabled={this.state.busy} title='Set default params' />
             <div className={`msp-transform-apply-wider`}>
-                <Button icon={canApply ? 'ok' : void 0} className={`msp-btn-commit msp-btn-commit-${canApply ? 'on' : 'off'}`} onClick={this.apply} disabled={!canApply}>
+                <Button icon={canApply ? Check : void 0} className={`msp-btn-commit msp-btn-commit-${canApply ? 'on' : 'off'}`} onClick={this.apply} disabled={!canApply}>
                     {this.props.applyLabel || this.applyText()}
                 </Button>
             </div>
@@ -235,7 +232,7 @@ abstract class TransformControlBase<P, S extends TransformControlBase.ComponentS
         const ctrl = <div className={wrapClass} style={{ marginBottom: this.props.noMargin ? 0 : void 0 }}>
             {display !== 'none' && !this.props.wrapInExpander && <div className='msp-transform-header'>
                 <Button onClick={this.toggleExpanded} title={display.description}>
-                    {!isEmpty && <Icon name={this.state.isCollapsed ? 'expand' : 'collapse'} />}
+                    {!isEmpty && <Icon svg={this.state.isCollapsed ? ArrowRight : ArrowDropDown} />}
                     {display.name}
                 </Button>
             </div>}
@@ -256,7 +253,7 @@ abstract class TransformControlBase<P, S extends TransformControlBase.ComponentS
             <Button icon={this.props.simpleApply?.icon} title={this.props.simpleApply?.title} disabled={this.state.busy || !canApply} onClick={this.apply} style={{ textAlign: 'left' }}>
                 {this.props.simpleApply?.header}
             </Button>
-            {!info.isEmpty && <ToggleButton icon='cog' label='' title='Options' toggle={this.toggleExpanded} isSelected={!this.state.isCollapsed} disabled={this.state.busy} style={{ flex: '0 0 40px', padding: 0 }} />}
+            {!info.isEmpty && <ToggleButton icon={Tune} label='' title='Options' toggle={this.toggleExpanded} isSelected={!this.state.isCollapsed} disabled={this.state.busy} style={{ flex: '0 0 40px', padding: 0 }} />}
         </div>;
 
         if (this.state.isCollapsed) return apply;

src/mol-plugin-ui/state/snapshots.tsx

@@ -16,6 +16,7 @@ import { urlCombine } from '../../mol-util/url';
 import { IconButton, SectionHeader, Button } from '../controls/common';
 import { formatTimespan } from '../../mol-util/now';
 import { PluginConfig } from '../../mol-plugin/config';
+import { ArrowUpward, SwapHoriz, Delete, ArrowDownward, CloudUpload, Save } from '@material-ui/icons';
 
 export class StateSnapshots extends PluginUIComponent<{ }> {
     downloadToFile = () => {
@@ -30,7 +31,7 @@ export class StateSnapshots extends PluginUIComponent<{ }> {
 
     render() {
         return <div>
-            <SectionHeader icon='floppy' title='Plugin State' />
+            <SectionHeader icon={Save} title='Plugin State' />
             <LocalStateSnapshots />
             <LocalStateSnapshotList />
             {this.plugin.spec.components?.remoteState !== 'none' && <RemoteStateSnapshots />}
@@ -147,10 +148,10 @@ class LocalStateSnapshotList extends PluginUIComponent<{ }, { }> {
                     </small>
                 </Button>
                 <div>
-                    <IconButton data-id={e!.snapshot.id} icon='up-thin' title='Move Up' onClick={this.moveUp} small={true} />
-                    <IconButton data-id={e!.snapshot.id} icon='down-thin' title='Move Down' onClick={this.moveDown} small={true} />
-                    <IconButton data-id={e!.snapshot.id} icon='switch' title='Replace' onClick={this.replace} small={true} />
-                    <IconButton data-id={e!.snapshot.id} icon='remove' title='Remove' onClick={this.remove} small={true} />
+                    <IconButton svg={ArrowUpward} data-id={e!.snapshot.id} title='Move Up' onClick={this.moveUp} small={true} />
+                    <IconButton svg={ArrowDownward} data-id={e!.snapshot.id} title='Move Down' onClick={this.moveDown} small={true} />
+                    <IconButton svg={SwapHoriz}  data-id={e!.snapshot.id} title='Replace' onClick={this.replace} small={true} />
+                    <IconButton svg={Delete} data-id={e!.snapshot.id} title='Remove' onClick={this.remove} small={true} />
                 </div>
             </li>)}
         </ul>;
@@ -275,7 +276,7 @@ export class RemoteStateSnapshots extends PluginUIComponent<
                     this.setState({ params: { ...this.state.params, [p.name]: p.value } } as any);
                 }} isDisabled={this.state.isBusy}/>
                 <div className='msp-flex-row'>
-                    <Button icon='upload' onClick={this.upload} disabled={this.state.isBusy}>Upload</Button>
+                    <Button icon={CloudUpload} onClick={this.upload} disabled={this.state.isBusy}>Upload</Button>
                     <Button onClick={this.refresh} disabled={this.state.isBusy}>Refresh</Button>
                 </div>
             </>}
@@ -319,7 +320,7 @@ class RemoteStateSnapshotList extends PurePluginUIComponent<
                     disabled={this.props.isBusy} onContextMenu={this.open} title='Click to download, right-click to open in a new tab.'>
                     {e!.name || new Date(e!.timestamp).toLocaleString()} <small>{e!.description}</small>
                 </Button>
-                {!e!.isSticky && this.props.remove && <IconButton data-id={e!.id} icon='remove' title='Remove' onClick={this.props.remove} disabled={this.props.isBusy} small />}
+                {!e!.isSticky && this.props.remove && <IconButton svg={Delete} data-id={e!.id} title='Remove' onClick={this.props.remove} disabled={this.props.isBusy} small />}
             </li>)}
         </ul>;
     }

src/mol-plugin-ui/state/tree.tsx

@@ -4,18 +4,19 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
+import { ArrowDropDown, ArrowRight, Delete, Home, Visibility, Close } from '@material-ui/icons';
 import * as React from 'react';
+import { debounceTime, filter } from 'rxjs/operators';
 import { PluginStateObject } from '../../mol-plugin-state/objects';
-import { State, StateTree as _StateTree, StateObject, StateTransform, StateObjectCell, StateAction } from '../../mol-state';
 import { PluginCommands } from '../../mol-plugin/commands';
+import { State, StateAction, StateObject, StateObjectCell, StateTransform } from '../../mol-state';
+import { StateTreeSpine } from '../../mol-state/tree/spine';
 import { PluginUIComponent, _Props, _State } from '../base';
-import { Icon } from '../controls/icons';
 import { ActionMenu } from '../controls/action-menu';
+import { Button, ControlGroup, IconButton } from '../controls/common';
+import { Icon } from '../controls/icons';
 import { ApplyActionControl } from './apply-action';
-import { ControlGroup, IconButton, Button } from '../controls/common';
 import { UpdateTransformControl } from './update-transform';
-import { StateTreeSpine } from '../../mol-state/tree/spine';
-import { debounceTime, filter } from 'rxjs/operators';
 
 export class StateTree extends PluginUIComponent<{ state: State }, { showActions: boolean }> {
     state = { showActions: true };
@@ -43,7 +44,7 @@ export class StateTree extends PluginUIComponent<{ state: State }, { showActions
         if (this.state.showActions) {
             return <div style={{ margin: '10px', cursor: 'default' }}>
                 <p>Nothing to see here.</p>
-                <p>Structures can be loaded from the <Icon name='home' /> tab.</p>
+                <p>Structures can be loaded from the <Icon svg={Home} /> tab.</p>
             </div>;
         }
         return <StateTreeNode cell={this.props.state.cells.get(ref)!} depth={0} />;
@@ -297,9 +298,9 @@ class StateTreeNodeLabel extends PluginUIComponent<{ cell: StateObjectCell, dept
         const children = cell.parent!.tree.children.get(this.ref);
         const cellState = cell.state;
 
-        const expand = <IconButton icon={cellState.isCollapsed ? 'expand' : 'collapse'} flex='20px' disabled={disabled} onClick={this.toggleExpanded} transparent className='msp-no-hover-outline' style={{ visibility: children.size > 0 ? 'visible' : 'hidden' }} />;
-        const remove = !cell.state.isLocked ? <IconButton icon='remove' onClick={this.remove} disabled={disabled} small toggleState={false} /> : void 0;
-        const visibility = <IconButton icon='visual-visibility' toggleState={!cellState.isHidden} disabled={disabled} small onClick={this.toggleVisible} />;
+        const expand = <IconButton svg={cellState.isCollapsed ? ArrowRight : ArrowDropDown} flex='20px' disabled={disabled} onClick={this.toggleExpanded} transparent className='msp-no-hover-outline' style={{ visibility: children.size > 0 ? 'visible' : 'hidden' }} />;
+        const remove = !cell.state.isLocked ? <IconButton svg={Delete} onClick={this.remove} disabled={disabled} small toggleState={false} /> : void 0;
+        const visibility = <IconButton svg={Visibility} toggleState={!cellState.isHidden} disabled={disabled} small onClick={this.toggleVisible} />;
 
         const marginStyle: React.CSSProperties = {
             marginLeft: `${this.props.depth * 8}px`
@@ -317,7 +318,7 @@ class StateTreeNodeLabel extends PluginUIComponent<{ cell: StateObjectCell, dept
         if (this.state.action === 'apply' && this.state.currentAction) {
             return <div style={{ marginBottom: '1px' }}>
                 {row}
-                <ControlGroup header={`Apply ${this.state.currentAction.definition.display.name}`} initialExpanded={true} hideExpander={true} hideOffset={false} onHeaderClick={this.hideApply} topRightIcon='off' headerLeftMargin={`${this.props.depth * 8 + 21}px`}>
+                <ControlGroup header={`Apply ${this.state.currentAction.definition.display.name}`} initialExpanded={true} hideExpander={true} hideOffset={false} onHeaderClick={this.hideApply} topRightIcon={Close} headerLeftMargin={`${this.props.depth * 8 + 21}px`}>
                     <ApplyActionControl onApply={this.hideApply} state={this.props.cell.parent!} action={this.state.currentAction} nodeRef={this.props.cell.transform.ref} hideHeader noMargin />
                 </ControlGroup>
             </div>;

src/mol-plugin-ui/structure/components.tsx

@@ -4,19 +4,21 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
+import { Add, BookmarksOutlined, Delete, MoreHoriz, Tune, Undo, Visibility } from '@material-ui/icons';
 import * as React from 'react';
+import { getStructureThemeTypes } from '../../mol-plugin-state/helpers/structure-representation-params';
 import { StructureComponentManager } from '../../mol-plugin-state/manager/structure/component';
-import { StructureComponentRef, StructureRepresentationRef, StructureRef } from '../../mol-plugin-state/manager/structure/hierarchy-state';
+import { StructureHierarchyManager } from '../../mol-plugin-state/manager/structure/hierarchy';
+import { StructureComponentRef, StructureRef, StructureRepresentationRef } from '../../mol-plugin-state/manager/structure/hierarchy-state';
 import { PluginCommands } from '../../mol-plugin/commands';
 import { State } from '../../mol-state';
 import { ParamDefinition } from '../../mol-util/param-definition';
 import { CollapsableControls, CollapsableState, PurePluginUIComponent } from '../base';
 import { ActionMenu } from '../controls/action-menu';
-import { ExpandGroup, IconButton, ToggleButton, Button } from '../controls/common';
+import { Button, ExpandGroup, IconButton, ToggleButton } from '../controls/common';
+import { Intersect, SetSvg, Subtract, Union } from '../controls/icons';
 import { ParameterControls } from '../controls/parameters';
 import { UpdateTransformControl } from '../state/update-transform';
-import { getStructureThemeTypes } from '../../mol-plugin-state/helpers/structure-representation-params';
-import { StructureHierarchyManager } from '../../mol-plugin-state/manager/structure/hierarchy';
 import { GenericEntryListControls } from './generic';
 
 interface StructureComponentControlState extends CollapsableState {
@@ -115,10 +117,10 @@ class ComponentEditorControls extends PurePluginUIComponent<{}, ComponentEditorC
             : 'Some mistakes of the past can be undone.';
         return <>
             <div className='msp-flex-row'>
-                <ToggleButton icon='bookmarks' label='Preset' title='Apply a representation preset for the current structure(s).' toggle={this.togglePreset} isSelected={this.state.action === 'preset'} disabled={this.isDisabled} />
-                <ToggleButton icon='plus' label='Add' title='Add a new representation component for a selection.' toggle={this.toggleAdd} isSelected={this.state.action === 'add'} disabled={this.isDisabled} />
-                <ToggleButton icon='cog' label='' title='Options that are applied to all applicable representations.' style={{ flex: '0 0 40px', padding: 0 }} toggle={this.toggleOptions} isSelected={this.state.action === 'options'} disabled={this.isDisabled} />
-                <IconButton className='msp-flex-item' flex='40px' onClick={this.undo} disabled={!this.state.canUndo || this.isDisabled} icon='back' title={undoTitle} />
+                <ToggleButton icon={BookmarksOutlined} label='Preset' title='Apply a representation preset for the current structure(s).' toggle={this.togglePreset} isSelected={this.state.action === 'preset'} disabled={this.isDisabled} />
+                <ToggleButton icon={Add} label='Add' title='Add a new representation component for a selection.' toggle={this.toggleAdd} isSelected={this.state.action === 'add'} disabled={this.isDisabled} />
+                <ToggleButton icon={Tune} label='' title='Options that are applied to all applicable representations.' style={{ flex: '0 0 40px', padding: 0 }} toggle={this.toggleOptions} isSelected={this.state.action === 'options'} disabled={this.isDisabled} />
+                <IconButton svg={Undo} className='msp-flex-item' flex='40px' onClick={this.undo} disabled={!this.state.canUndo || this.isDisabled} title={undoTitle} />
             </div>
             {this.state.action === 'preset' && this.presetControls}
             {this.state.action === 'add' && <div className='msp-control-offset'>
@@ -163,7 +165,7 @@ class AddComponentControls extends PurePluginUIComponent<AddComponentControlsPro
     render() {
         return <>
             <ParameterControls params={this.state.params} values={this.state.values} onChangeValues={this.paramsChanged} />
-            <Button icon='plus' title='Use Selection and optional Representation to create a new Component.' className='msp-btn-commit msp-btn-commit-on' onClick={this.apply} style={{ marginTop: '1px' }}>
+            <Button icon={Add} title='Use Selection and optional Representation to create a new Component.' className='msp-btn-commit msp-btn-commit-on' onClick={this.apply} style={{ marginTop: '1px' }}>
                 Create Component
             </Button>
         </>;
@@ -253,13 +255,13 @@ class StructureComponentGroup extends PurePluginUIComponent<{ group: StructureCo
         if (mng.canBeModified(this.props.group[0])) {
             ret.push([
                 ActionMenu.Header('Modify by Selection'),
-                ActionMenu.Item('Include', () => mng.modifyByCurrentSelection(this.props.group, 'union'), { icon: 'union' }),
-                ActionMenu.Item('Subtract', () => mng.modifyByCurrentSelection(this.props.group, 'subtract'), { icon: 'subtract' }),
-                ActionMenu.Item('Intersect', () => mng.modifyByCurrentSelection(this.props.group, 'intersect'), { icon: 'intersect' })
+                ActionMenu.Item('Include', () => mng.modifyByCurrentSelection(this.props.group, 'union'), { icon: Union }),
+                ActionMenu.Item('Subtract', () => mng.modifyByCurrentSelection(this.props.group, 'subtract'), { icon: Subtract }),
+                ActionMenu.Item('Intersect', () => mng.modifyByCurrentSelection(this.props.group, 'intersect'), { icon: Intersect })
             ]);
         }
 
-        ret.push(ActionMenu.Item('Select This', () => mng.selectThis(this.props.group), { icon: 'set' }));
+        ret.push(ActionMenu.Item('Select This', () => mng.selectThis(this.props.group), { icon: SetSvg }));
 
         return ret;
     }
@@ -272,7 +274,7 @@ class StructureComponentGroup extends PurePluginUIComponent<{ group: StructureCo
 
     get removeActions(): ActionMenu.Items {
         const ret = [
-            ActionMenu.Item('Remove', () => this.plugin.managers.structure.hierarchy.remove(this.props.group, true), { icon: 'remove' })
+            ActionMenu.Item('Remove', () => this.plugin.managers.structure.hierarchy.remove(this.props.group, true), { icon: Delete })
         ];
 
         const reprs = this.pivot.representations;
@@ -280,7 +282,7 @@ class StructureComponentGroup extends PurePluginUIComponent<{ group: StructureCo
             return ret;
         }
 
-        ret.push(ActionMenu.Item(`Remove Representation${reprs.length > 1 ? 's' : ''}`, () => this.plugin.managers.structure.component.removeRepresentations(this.props.group), { icon: 'remove' }));
+        ret.push(ActionMenu.Item(`Remove Representation${reprs.length > 1 ? 's' : ''}`, () => this.plugin.managers.structure.component.removeRepresentations(this.props.group), { icon: Delete }));
 
         return ret;
     }
@@ -343,9 +345,9 @@ class StructureComponentGroup extends PurePluginUIComponent<{ group: StructureCo
                     {label}
                     <small className='msp-25-lower-contrast-text' style={{ float: 'right' }}>{reprLabel}</small>
                 </Button>
-                <IconButton onClick={this.toggleVisible} icon='visual-visibility' toggleState={!cell.state.isHidden} title={`${cell.state.isHidden ? 'Show' : 'Hide'} component`} small className='msp-form-control' flex />
-                <IconButton onClick={this.toggleRemove} icon='remove' title='Remove' small toggleState={this.state.action === 'remove'} className='msp-form-control' flex />
-                <IconButton onClick={this.toggleAction} icon='dot-3' title='Actions' toggleState={this.state.action === 'action'} className='msp-form-control' flex />
+                <IconButton svg={Visibility} onClick={this.toggleVisible} toggleState={!cell.state.isHidden} title={`${cell.state.isHidden ? 'Show' : 'Hide'} component`} small className='msp-form-control' flex />
+                <IconButton svg={Delete} onClick={this.toggleRemove} title='Remove' small toggleState={this.state.action === 'remove'} className='msp-form-control' flex />
+                <IconButton svg={MoreHoriz} onClick={this.toggleAction} title='Actions' toggleState={this.state.action === 'action'} className='msp-form-control' flex />
             </div>
             {this.state.action === 'remove' && <div style={{ marginBottom: '6px' }}>
                 <ActionMenu items={this.removeActions} onSelect={this.selectRemoveAction} />
@@ -384,10 +386,10 @@ class StructureRepresentationEntry extends PurePluginUIComponent<{ group: Struct
             {repr.parent && <ExpandGroup header={`${repr.obj?.label || ''} Representation`} noOffset>
                 <UpdateTransformControl state={repr.parent} transform={repr.transform} customHeader='none' customUpdate={this.update} noMargin />
             </ExpandGroup>}
-            <IconButton onClick={this.remove} icon='remove' title='Remove' small className='msp-default-bg' style={{
+            <IconButton svg={Delete} onClick={this.remove} title='Remove' small className='msp-default-bg' style={{
                 position: 'absolute', top: 0, right: '32px', lineHeight: '24px', height: '24px', textAlign: 'right', width: '44px', paddingRight: '6px'
             }} />
-            <IconButton onClick={this.toggleVisible} toggleState={!this.props.representation.cell.state.isHidden} icon='visual-visibility' title='Remove' small className='msp-default-bg' style={{
+            <IconButton svg={Visibility} onClick={this.toggleVisible} toggleState={!this.props.representation.cell.state.isHidden} title='Remove' small className='msp-default-bg' style={{
                 position: 'absolute', top: 0, right: 0, lineHeight: '24px', height: '24px', textAlign: 'right', width: '32px', paddingRight: '6px'
             }} />
         </div>;

src/mol-plugin-ui/structure/focus.tsx

@@ -4,21 +4,22 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
+import { CenterFocusStrong, Clear } from '@material-ui/icons';
 import * as React from 'react';
-import { PluginUIComponent } from '../base';
-import { ToggleButton, IconButton, Button } from '../controls/common';
-import { ActionMenu } from '../controls/action-menu';
-import { StructureElement, StructureProperties, Structure, Unit } from '../../mol-model/structure';
 import { OrderedSet, SortedArray } from '../../mol-data/int';
+import { MmcifFormat } from '../../mol-model-formats/structure/mmcif';
+import { Structure, StructureElement, StructureProperties, Unit } from '../../mol-model/structure';
 import { UnitIndex } from '../../mol-model/structure/structure/element/element';
 import { FocusEntry } from '../../mol-plugin-state/manager/structure/focus';
-import { lociLabel } from '../../mol-theme/label';
+import { StructureRef } from '../../mol-plugin-state/manager/structure/hierarchy-state';
 import { FocusLoci } from '../../mol-plugin/behavior/dynamic/representation';
 import { StateTransform } from '../../mol-state';
+import { lociLabel } from '../../mol-theme/label';
 import { Binding } from '../../mol-util/binding';
 import { memoizeLatest } from '../../mol-util/memoize';
-import { StructureRef } from '../../mol-plugin-state/manager/structure/hierarchy-state';
-import { MmcifFormat } from '../../mol-model-formats/structure/mmcif';
+import { PluginUIComponent } from '../base';
+import { ActionMenu } from '../controls/action-menu';
+import { Button, IconButton, ToggleButton } from '../controls/common';
 
 interface StructureFocusControlsState {
     isBusy: boolean
@@ -234,8 +235,8 @@ export class StructureFocusControls extends PluginUIComponent<{}, StructureFocus
                     style={{ textAlignLast: current ? 'left' : void 0 }}>
                     {label}
                 </Button>
-                {current && <IconButton onClick={this.clear} icon='cancel' title='Clear' className='msp-form-control' flex disabled={this.isDisabled} />}
-                <ToggleButton icon='book-open' title='Select a focus target to center on an show its surroundings. Hold shift to focus on multiple targets.' toggle={this.toggleAction} isSelected={this.state.showAction} disabled={this.isDisabled} style={{ flex: '0 0 40px', padding: 0 }} />
+                {current && <IconButton svg={Clear} onClick={this.clear} title='Clear' className='msp-form-control' flex disabled={this.isDisabled} />}
+                <ToggleButton icon={CenterFocusStrong} title='Select a focus target to center on an show its surroundings. Hold shift to focus on multiple targets.' toggle={this.toggleAction} isSelected={this.state.showAction} disabled={this.isDisabled} style={{ flex: '0 0 40px', padding: 0 }} />
             </div>
             {this.state.showAction && <ActionMenu items={this.actionItems} onSelect={this.selectAction} />}
         </>;

src/mol-plugin-ui/structure/generic.tsx

@@ -12,6 +12,7 @@ import { State } from '../../mol-state';
 import { PurePluginUIComponent } from '../base';
 import { IconButton } from '../controls/common';
 import { UpdateTransformControl } from '../state/update-transform';
+import { Visibility, MoreHoriz } from '@material-ui/icons';
 
 export class GenericEntryListControls extends PurePluginUIComponent {
     get current() {
@@ -140,8 +141,8 @@ export class GenericEntry<T extends HierarchyRef> extends PurePluginUIComponent<
                 <button className='msp-form-control msp-control-button-label' title={`${label}. Click to focus.`} onClick={this.focus} onMouseEnter={this.highlight} onMouseLeave={this.clearHighlight} style={{ textAlign: 'left' }}>
                     {label} <small>{description}</small>
                 </button>
-                <IconButton className='msp-form-control' onClick={this.toggleVisibility} icon='visual-visibility' toggleState={!pivot.cell.state.isHidden} title={`${pivot.cell.state.isHidden ? 'Show' : 'Hide'}`} small flex />
-                {refs.length === 1 && <IconButton className='msp-form-control' onClick={this.toggleOptions} icon='dot-3' title='Options' toggleState={this.state.showOptions} flex />}
+                <IconButton svg={Visibility} className='msp-form-control' onClick={this.toggleVisibility} toggleState={!pivot.cell.state.isHidden} title={`${pivot.cell.state.isHidden ? 'Show' : 'Hide'}`} small flex />
+                {refs.length === 1 && <IconButton svg={MoreHoriz} className='msp-form-control' onClick={this.toggleOptions} title='Options' toggleState={this.state.showOptions} flex />}
             </div>
             {(refs.length === 1 && this.state.showOptions && pivot.cell.parent) && <>
                 <div className='msp-control-offset'>

src/mol-plugin-ui/structure/measurements.tsx

@@ -17,9 +17,10 @@ import { FiniteArray } from '../../mol-util/type-helpers';
 import { PurePluginUIComponent, CollapsableControls } from '../base';
 import { ActionMenu } from '../controls/action-menu';
 import { ExpandGroup, IconButton, ToggleButton, Button } from '../controls/common';
-import { Icon } from '../controls/icons';
+import { Icon, SetSvg } from '../controls/icons';
 import { ParameterControls } from '../controls/parameters';
 import { UpdateTransformControl } from '../state/update-transform';
+import { ArrowUpward, ArrowDownward, Delete, Visibility, Remove, MoreHoriz, HelpOutline, Add, Tune } from '@material-ui/icons';
 
 // TODO details, options (e.g. change text for labels)
 
@@ -142,9 +143,9 @@ export class MeasurementControls extends PurePluginUIComponent<{}, { isBusy: boo
             <Button noOverflow title='Click to focus. Hover to highlight.' onClick={() => this.focusLoci(e.loci)} style={{ width: 'auto', textAlign: 'left' }} onMouseEnter={() => this.highlight(e.loci)} onMouseLeave={this.plugin.managers.interactivity.lociHighlights.clearHighlights}>
                 {idx}. <span dangerouslySetInnerHTML={{ __html: e.label }} />
             </Button>
-            {history.length > 1 && <IconButton small={true} className='msp-form-control' onClick={() => this.moveHistory(e, 'up')} icon='up-thin' flex='20px' title={'Move up'} />}
-            {history.length > 1 && <IconButton small={true} className='msp-form-control' onClick={() => this.moveHistory(e, 'down')} icon='down-thin' flex='20px' title={'Move down'} />}
-            <IconButton small={true} className='msp-form-control' onClick={() => this.plugin.managers.structure.selection.modifyHistory(e, 'remove')} icon='remove' flex title={'Remove'} />
+            {history.length > 1 && <IconButton svg={ArrowUpward} small={true} className='msp-form-control' onClick={() => this.moveHistory(e, 'up')} flex='20px' title={'Move up'} />}
+            {history.length > 1 && <IconButton svg={ArrowDownward} small={true} className='msp-form-control' onClick={() => this.moveHistory(e, 'down')} flex='20px' title={'Move down'} />}
+            <IconButton svg={Delete} small={true} className='msp-form-control' onClick={() => this.plugin.managers.structure.selection.modifyHistory(e, 'remove')} flex title={'Remove'} />
         </div>;
     }
 
@@ -162,7 +163,7 @@ export class MeasurementControls extends PurePluginUIComponent<{}, { isBusy: boo
                 {entries}
             </div>}
             {entries.length === 0 && <div className='msp-control-offset msp-help-text'>
-                <div className='msp-help-description'><Icon name='help-circle' />Add one or more selections</div>
+                <div className='msp-help-description'><Icon svg={HelpOutline} />Add one or more selections</div>
             </div>}
         </>;
     }
@@ -170,8 +171,8 @@ export class MeasurementControls extends PurePluginUIComponent<{}, { isBusy: boo
     render() {
         return <>
             <div className='msp-flex-row'>
-                <ToggleButton icon='plus' label='Add' toggle={this.toggleAdd} isSelected={this.state.action === 'add'} disabled={this.state.isBusy} style={{ textAlign: 'left' }} />
-                <ToggleButton icon='cog' label='' title='Options' toggle={this.toggleOptions} isSelected={this.state.action === 'options'} disabled={this.state.isBusy} style={{ flex: '0 0 40px', padding: 0 }} />
+                <ToggleButton icon={Add} label='Add' toggle={this.toggleAdd} isSelected={this.state.action === 'add'} disabled={this.state.isBusy} style={{ textAlign: 'left' }} />
+                <ToggleButton icon={Tune} label='' title='Options' toggle={this.toggleOptions} isSelected={this.state.action === 'options'} disabled={this.state.isBusy} style={{ flex: '0 0 40px', padding: 0 }} />
             </div>
             {this.state.action === 'add' && this.add()}
             {this.state.action === 'options' && <MeasurementsOptions />}
@@ -269,7 +270,7 @@ class MeasurementEntry extends PurePluginUIComponent<{ cell: StructureMeasuremen
 
     get actions(): ActionMenu.Items {
         this.props.cell.sourceRef;
-        return [ActionMenu.Item('Select This', () => this.plugin.managers.structure.selection.fromSelections(this.props.cell.sourceRef!), { icon: 'set' })];
+        return [ActionMenu.Item('Select This', () => this.plugin.managers.structure.selection.fromSelections(this.props.cell.sourceRef!), { icon: SetSvg })];
     }
 
     selectAction: ActionMenu.OnSelect = item => {
@@ -288,9 +289,9 @@ class MeasurementEntry extends PurePluginUIComponent<{ cell: StructureMeasuremen
                 <button className='msp-form-control msp-control-button-label msp-no-overflow' title='Click to focus. Hover to highlight.' onClick={this.focus} style={{ width: 'auto', textAlign: 'left' }}>
                     <span dangerouslySetInnerHTML={{ __html: this.label }} />
                 </button>
-                <IconButton small className='msp-form-control' onClick={this.toggleVisibility} icon='eye' flex title={cell.state.isHidden ? 'Show' : 'Hide'} toggleState={!cell.state.isHidden} />
-                <IconButton small className='msp-form-control' onClick={this.delete} icon='remove' flex title='Delete' />
-                <IconButton className='msp-form-control' onClick={this.toggleUpdate} icon='dot-3' flex title='Actions' toggleState={this.state.showUpdate} />
+                <IconButton svg={Visibility} small className='msp-form-control' onClick={this.toggleVisibility} flex title={cell.state.isHidden ? 'Show' : 'Hide'} toggleState={!cell.state.isHidden} />
+                <IconButton svg={Remove} small className='msp-form-control' onClick={this.delete} flex title='Delete' />
+                <IconButton svg={MoreHoriz} className='msp-form-control' onClick={this.toggleUpdate} flex title='Actions' toggleState={this.state.showUpdate} />
             </div>
             {this.state.showUpdate && cell.parent && <>
                 <div className='msp-accent-offset'>

src/mol-plugin-ui/structure/selection.tsx

@@ -5,8 +5,10 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
+import { Close, Clear, Brush } from '@material-ui/icons';
 import * as React from 'react';
 import { StructureSelectionQueries, StructureSelectionQuery } from '../../mol-plugin-state/helpers/structure-selection-query';
+import { InteractivityManager } from '../../mol-plugin-state/manager/interactivity';
 import { StructureComponentManager } from '../../mol-plugin-state/manager/structure/component';
 import { StructureRef } from '../../mol-plugin-state/manager/structure/hierarchy-state';
 import { StructureSelectionModifier } from '../../mol-plugin-state/manager/structure/selection';
@@ -17,7 +19,7 @@ import { PluginUIComponent, PurePluginUIComponent } from '../base';
 import { ActionMenu } from '../controls/action-menu';
 import { Button, ControlGroup, IconButton, ToggleButton } from '../controls/common';
 import { ParameterControls, ParamOnChange, PureSelectControl } from '../controls/parameters';
-import { InteractivityManager } from '../../mol-plugin-state/manager/interactivity';
+import { Union, Subtract, Intersect, SetSvg as SetSvg } from '../controls/icons';
 
 const StructureSelectionParams = {
     granularity: InteractivityManager.Params.granularity,
@@ -177,19 +179,19 @@ export class StructureSelectionActionsControls extends PluginUIComponent<{}, Str
         const granularity = this.plugin.managers.interactivity.props.granularity;
         return <>
             <div className='msp-flex-row'>
-                <ToggleButton icon='union' title={ActionHeader.get('add')} toggle={this.toggleAdd} isSelected={this.state.action === 'add'} disabled={this.isDisabled} />
-                <ToggleButton icon='subtract' title={ActionHeader.get('remove')} toggle={this.toggleRemove} isSelected={this.state.action === 'remove'} disabled={this.isDisabled} />
-                <ToggleButton icon='intersect' title={ActionHeader.get('intersect')} toggle={this.toggleIntersect} isSelected={this.state.action === 'intersect'} disabled={this.isDisabled} />
-                <ToggleButton icon='set' title={ActionHeader.get('set')} toggle={this.toggleSet} isSelected={this.state.action === 'set'} disabled={this.isDisabled} />
-                <ToggleButton icon='brush' title='Color' toggle={this.toggleColor} isSelected={this.state.action === 'color'} disabled={this.isDisabled} />
+                <ToggleButton icon={Union} title={ActionHeader.get('add')} toggle={this.toggleAdd} isSelected={this.state.action === 'add'} disabled={this.isDisabled} />
+                <ToggleButton icon={Subtract} title={ActionHeader.get('remove')} toggle={this.toggleRemove} isSelected={this.state.action === 'remove'} disabled={this.isDisabled} />
+                <ToggleButton icon={Intersect} title={ActionHeader.get('intersect')} toggle={this.toggleIntersect} isSelected={this.state.action === 'intersect'} disabled={this.isDisabled} />
+                <ToggleButton icon={SetSvg} title={ActionHeader.get('set')} toggle={this.toggleSet} isSelected={this.state.action === 'set'} disabled={this.isDisabled} />
+                <ToggleButton icon={Brush} title='Color' toggle={this.toggleColor} isSelected={this.state.action === 'color'} disabled={this.isDisabled} />
                 <PureSelectControl title={`Picking Level`} param={StructureSelectionParams.granularity} name='granularity' value={granularity} onChange={this.setGranuality} isDisabled={this.isDisabled} />
-                <IconButton icon='cancel' title='Turn selection mode off' onClick={this.turnOff} />
+                <IconButton svg={Close} title='Turn selection mode off' onClick={this.turnOff} />
             </div>
             {(this.state.action && this.state.action !== 'color') && <div className='msp-selection-viewport-controls-actions'>
                 <ActionMenu header={ActionHeader.get(this.state.action as StructureSelectionModifier)} items={this.queries} onSelect={this.selectQuery} noOffset />
             </div>}
             {this.state.action === 'color' && <div className='msp-selection-viewport-controls-actions'>
-                <ControlGroup header='Color' initialExpanded={true} hideExpander={true} hideOffset={true} onHeaderClick={this.toggleColor} topRightIcon='off'>
+                <ControlGroup header='Color' initialExpanded={true} hideExpander={true} hideOffset={true} onHeaderClick={this.toggleColor} topRightIcon={Close}>
                     <ApplyColorControls />
                 </ControlGroup>
             </div>}
@@ -264,7 +266,7 @@ export class StructureSelectionStatsControls extends PluginUIComponent<{ hideOnE
                     style={{ textAlignLast: !empty ? 'left' : void 0 }}>
                     {this.stats}
                 </Button>
-                {!empty && <IconButton onClick={this.clear} icon='cancel' title='Clear' className='msp-form-control' flex />}
+                {!empty && <IconButton svg={Clear} onClick={this.clear} title='Clear' className='msp-form-control' flex />}
             </div>
         </>;
     }
@@ -294,7 +296,7 @@ class ApplyColorControls extends PurePluginUIComponent<ApplyColorControlsProps,
     render() {
         return <>
             <ParameterControls params={this.params} values={this.state.values} onChangeValues={this.paramsChanged} />
-            <Button icon='brush' className='msp-btn-commit msp-btn-commit-on' onClick={this.apply} style={{ marginTop: '1px' }}>
+            <Button icon={Brush} className='msp-btn-commit msp-btn-commit-on' onClick={this.apply} style={{ marginTop: '1px' }}>
                 Apply Coloring
             </Button>
         </>;

src/mol-plugin-ui/structure/source.tsx

@@ -16,6 +16,7 @@ import { StructureFocusControls } from './focus';
 import { UpdateTransformControl } from '../state/update-transform';
 import { StructureSelectionStatsControls } from './selection';
 import { StateSelection } from '../../mol-state';
+import { BookmarksOutlined } from '@material-ui/icons';
 
 interface StructureSourceControlState extends CollapsableState {
     isBusy: boolean,
@@ -267,7 +268,7 @@ export class StructureSourceControls extends CollapsableControls<{}, StructureSo
         return <>
             <div className='msp-flex-row' style={{ marginTop: '1px' }}>
                 <Button noOverflow flex onClick={this.toggleHierarchy} disabled={disabled} title={label}>{label}</Button>
-                {presets.length > 0 && <IconButton className='msp-form-control' flex='40px' onClick={this.togglePreset} icon='bookmarks' title='Apply a structure presets to the current hierarchy.' toggleState={this.state.show === 'presets'} disabled={disabled} />}
+                {presets.length > 0 && <IconButton svg={BookmarksOutlined} className='msp-form-control' flex='40px' onClick={this.togglePreset} title='Apply a structure presets to the current hierarchy.' toggleState={this.state.show === 'presets'} disabled={disabled} />}
             </div>
             {this.state.show === 'hierarchy' && <ActionMenu items={this.hierarchyItems} onSelect={this.selectHierarchy} multiselect />}
             {this.state.show === 'presets' && <ActionMenu items={presets} onSelect={this.applyPreset} />}

src/mol-plugin-ui/structure/volume.tsx

@@ -16,6 +16,7 @@ import { StructureHierarchyManager } from '../../mol-plugin-state/manager/struct
 import { FocusLoci } from '../../mol-plugin/behavior/dynamic/representation';
 import { StateSelection, StateTransform } from '../../mol-state';
 import { VolumeStreaming } from '../../mol-plugin/behavior/dynamic/volume-streaming/behavior';
+import { Check, Error as ErrorSvg } from '@material-ui/icons';
 
 interface VolumeStreamingControlState extends CollapsableState {
     isBusy: boolean
@@ -69,10 +70,10 @@ export class VolumeStreamingControls extends CollapsableControls<{}, VolumeStrea
         const rootCell = root && pivot.cell.parent.cells.get(root);
 
         const simpleApply = rootCell && rootCell.status === 'error'
-            ? { header: 'Error enabling', icon: 'alert' as const, title: rootCell.errorText }
+            ? { header: 'Error enabling', icon: ErrorSvg, title: rootCell.errorText }
             : rootCell && rootCell.obj?.data.entries.length === 0
-                ? { header: 'Error enabling', icon: 'alert' as const, title: 'No entry for streaming found' }
-                : { header: 'Enable', icon: 'check' as const, title: 'Enable' };
+                ? { header: 'Error enabling', icon: ErrorSvg, title: 'No entry for streaming found' }
+                : { header: 'Enable', icon: Check, title: 'Enable' };
 
         return <ApplyActionControl state={pivot.cell.parent} action={InitVolumeStreaming} initiallyCollapsed={true} nodeRef={pivot.cell.transform.ref} simpleApply={simpleApply} />;
     }

src/mol-plugin-ui/task.tsx

@@ -11,6 +11,7 @@ import { TaskManager } from '../mol-plugin/util/task-manager';
 import { filter } from 'rxjs/operators';
 import { Progress } from '../mol-task';
 import { IconButton } from './controls/common';
+import { Cancel } from '@material-ui/icons';
 
 export class BackgroundTaskProgress extends PluginUIComponent<{ }, { tracked: OrderedMap<number, TaskManager.ProgressEvent> }> {
     componentDidMount() {
@@ -49,7 +50,7 @@ class ProgressEntry extends PluginUIComponent<{ event: TaskManager.ProgressEvent
 
         return <div className='msp-task-state'>
             <div>
-                {root.progress.canAbort && <IconButton onClick={this.abort} icon='abort' title='Abort' />}
+                {root.progress.canAbort && <IconButton svg={Cancel} onClick={this.abort} title='Abort' />}
                 <div>
                     {root.progress.message} {pr} {subtasks}
                 </div>

src/mol-plugin-ui/toast.tsx

@@ -10,6 +10,7 @@ import * as React from 'react';
 import { PluginUIComponent } from './base';
 import { PluginToastManager } from '../mol-plugin/util/toast';
 import { IconButton } from './controls/common';
+import { Cancel } from '@material-ui/icons';
 
 class ToastEntry extends PluginUIComponent<{ entry: PluginToastManager.Entry }> {
     private hide = () => {
@@ -32,7 +33,7 @@ class ToastEntry extends PluginUIComponent<{ entry: PluginToastManager.Entry }>
             </div>
             <div className='msp-toast-clear'></div>
             <div className='msp-toast-hide'>
-                <IconButton onClick={this.hide} icon='abort' title='Hide' className='msp-no-hover-outline' />
+                <IconButton svg={Cancel} onClick={this.hide} title='Hide' className='msp-no-hover-outline' />
             </div>
         </div>;
     }

src/mol-plugin-ui/viewport.tsx

@@ -5,16 +5,16 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
+import { Autorenew, Build, Camera, Crop, Fullscreen, Tune, Close } from '@material-ui/icons';
 import * as React from 'react';
 import { resizeCanvas } from '../mol-canvas3d/util';
 import { PluginCommands } from '../mol-plugin/commands';
+import { PluginConfig } from '../mol-plugin/config';
 import { ParamDefinition as PD } from '../mol-util/param-definition';
 import { PluginUIComponent } from './base';
 import { ControlGroup, IconButton } from './controls/common';
-import { SimpleSettingsControl } from './viewport/simple-settings';
 import { DownloadScreenshotControls } from './viewport/screenshot';
-import { IconName } from './controls/icons';
-import { PluginConfig } from '../mol-plugin/config';
+import { SimpleSettingsControl } from './viewport/simple-settings';
 
 interface ViewportControlsState {
     isSettingsExpanded: boolean,
@@ -76,8 +76,8 @@ export class ViewportControls extends PluginUIComponent<ViewportControlsProps, V
         this.subscribe(this.plugin.behaviors.interaction.selectionMode, () => this.forceUpdate());
     }
 
-    icon(name: IconName, onClick: (e: React.MouseEvent<HTMLButtonElement>) => void, title: string, isOn = true) {
-        return <IconButton icon={name} toggleState={isOn} onClick={onClick} title={title} style={{ background: 'transparent' }} />;
+    icon(icon: React.FC, onClick: (e: React.MouseEvent<HTMLButtonElement>) => void, title: string, isOn = true) {
+        return <IconButton svg={icon} toggleState={isOn} onClick={onClick} title={title} style={{ background: 'transparent' }} />;
     }
 
     onMouseMove = (e: React.MouseEvent) => {
@@ -90,32 +90,32 @@ export class ViewportControls extends PluginUIComponent<ViewportControlsProps, V
             <div className='msp-viewport-controls-buttons'>
                 <div>
                     <div className='msp-semi-transparent-background' />
-                    {this.icon('reset-scene', this.resetCamera, 'Reset Camera')}
+                    {this.icon(Autorenew, this.resetCamera, 'Reset Camera')}
                 </div>
                 <div>
                     <div className='msp-semi-transparent-background' />
-                    {this.icon('screenshot', this.toggleScreenshotExpanded, 'Screenshot', this.state.isScreenshotExpanded)}
+                    {this.icon(Camera, this.toggleScreenshotExpanded, 'Screenshot', this.state.isScreenshotExpanded)}
                 </div>
                 <div>
                     <div className='msp-semi-transparent-background' />
-                    {this.icon('tools', this.toggleControls, 'Toggle Controls', this.plugin.layout.state.showControls)}
-                    {this.plugin.config.get(PluginConfig.Viewport.ShowExpand) && this.icon('expand-layout', this.toggleExpanded, 'Toggle Expanded', this.plugin.layout.state.isExpanded)}
-                    {this.icon('settings', this.toggleSettingsExpanded, 'Settings / Controls Info', this.state.isSettingsExpanded)}
+                    {this.icon(Build, this.toggleControls, 'Toggle Controls', this.plugin.layout.state.showControls)}
+                    {this.plugin.config.get(PluginConfig.Viewport.ShowExpand) && this.icon(Fullscreen, this.toggleExpanded, 'Toggle Expanded', this.plugin.layout.state.isExpanded)}
+                    {this.icon(Tune, this.toggleSettingsExpanded, 'Settings / Controls Info', this.state.isSettingsExpanded)}
                 </div>
                 {this.plugin.config.get(PluginConfig.Viewport.ShowSelectionMode) && <div>
                     <div className='msp-semi-transparent-background' />
-                    {this.icon('mouse-plus', this.toggleSelectionMode, 'Toggle Selection Mode', this.plugin.behaviors.interaction.selectionMode.value)}
+                    {this.icon(Crop, this.toggleSelectionMode, 'Toggle Selection Mode', this.plugin.behaviors.interaction.selectionMode.value)}
                 </div>}
             </div>
             {this.state.isScreenshotExpanded && <div className='msp-viewport-controls-panel'>
                 <ControlGroup header='Screenshot' initialExpanded={true} hideExpander={true} hideOffset={true} onHeaderClick={this.toggleScreenshotExpanded}
-                    topRightIcon='off' noTopMargin>
+                    topRightIcon={Close} noTopMargin>
                     <DownloadScreenshotControls close={this.toggleScreenshotExpanded} />
                 </ControlGroup>
             </div>}
             {this.state.isSettingsExpanded && <div className='msp-viewport-controls-panel'>
                 <ControlGroup header='Settings / Controls Info' initialExpanded={true} hideExpander={true} hideOffset={true} onHeaderClick={this.toggleSettingsExpanded}
-                    topRightIcon='off' noTopMargin childrenClassName='msp-viewport-controls-panel-controls'>
+                    topRightIcon={Close} noTopMargin childrenClassName='msp-viewport-controls-panel-controls'>
                     <SimpleSettingsControl />
                 </ControlGroup>
             </div>}

src/mol-plugin-ui/viewport/help.tsx

@@ -12,6 +12,7 @@ import { SelectLoci } from '../../mol-plugin/behavior/dynamic/representation';
 import { FocusLoci } from '../../mol-plugin/behavior/dynamic/representation';
 import { Icon } from '../controls/icons';
 import { Button } from '../controls/common';
+import { ArrowRight, ArrowDropDown, Camera } from '@material-ui/icons';
 
 function getBindingsList(bindings: { [k: string]: Binding }) {
     return Object.keys(bindings).map(k => [k, bindings[k]] as [string, Binding]);
@@ -57,7 +58,7 @@ class HelpGroup extends React.PureComponent<{ header: string, initiallyExpanded?
         return <div className='msp-control-group-wrapper'>
             <div className='msp-control-group-header'>
                 <Button onClick={this.toggleExpanded}>
-                    <Icon name={this.state.isExpanded ? 'collapse' : 'expand'} />
+                    <Icon svg={this.state.isExpanded ? ArrowDropDown : ArrowRight} />
                     {this.props.header}
                 </Button>
             </div>
@@ -152,7 +153,7 @@ export class HelpContent extends PluginUIComponent {
             <HelpSection header='How-to Guides' />
             <HelpGroup header='Create an Image'>
                 <HelpText>
-                    <p>Use the <Icon name='screenshot' /> icon in the viewport to bring up the screenshot controls.</p>
+                    <p>Use the <Icon svg={Camera} /> icon in the viewport to bring up the screenshot controls.</p>
                     <p>To adjust the size of the image, use the <i>Resolution</i> dropdown.</p>
                 </HelpText>
             </HelpGroup>

src/mol-plugin-ui/viewport/screenshot.tsx

@@ -14,6 +14,7 @@ import { Subject } from 'rxjs';
 import { ViewportScreenshotHelper } from '../../mol-plugin/util/viewport-screenshot';
 import { Button } from '../controls/common';
 import { CameraHelperProps } from '../../mol-canvas3d/helper/camera-helper';
+import { GetApp, Launch } from '@material-ui/icons';
 
 interface ImageControlsState {
     showPreview: boolean
@@ -124,8 +125,8 @@ export class DownloadScreenshotControls extends PluginUIComponent<{ close: () =>
                 <span>Right-click the image to Copy.</span>
             </div>
             <div className='msp-flex-row'>
-                <Button icon='download' onClick={this.download} disabled={this.state.isDisabled}>Download</Button>
-                <Button icon='export' onClick={this.openTab} disabled={this.state.isDisabled}>Open in new Tab</Button>
+                <Button icon={GetApp} onClick={this.download} disabled={this.state.isDisabled}>Download</Button>
+                <Button icon={Launch} onClick={this.openTab} disabled={this.state.isDisabled}>Open in new Tab</Button>
             </div>
             <ParameterControls params={this.plugin.helpers.viewportScreenshot!.params} values={this.plugin.helpers.viewportScreenshot!.values} onChange={this.setProps} isDisabled={this.state.isDisabled} />
         </div>;

src/mol-plugin/behavior/dynamic/custom-props/rcsb/ui/assembly-symmetry.tsx

@@ -16,6 +16,7 @@ import { StateAction, StateSelection } from '../../../../../../mol-state';
 import { PluginStateObject } from '../../../../../../mol-plugin-state/objects';
 import { PluginContext } from '../../../../../context';
 import { Task } from '../../../../../../mol-task';
+import { Check } from '@material-ui/icons';
 
 interface AssemblySymmetryControlState extends CollapsableState {
     isBusy: boolean
@@ -60,7 +61,7 @@ export class AssemblySymmetryControls extends CollapsableControls<{}, AssemblySy
     renderEnable() {
         const pivot = this.pivot;
         if (!pivot.cell.parent) return null;
-        return <ApplyActionControl state={pivot.cell.parent} action={EnableAssemblySymmetry3D} initiallyCollapsed={true} nodeRef={pivot.cell.transform.ref} simpleApply={{ header: 'Enable', icon: 'check' }} />;
+        return <ApplyActionControl state={pivot.cell.parent} action={EnableAssemblySymmetry3D} initiallyCollapsed={true} nodeRef={pivot.cell.transform.ref} simpleApply={{ header: 'Enable', icon: Check }} />;
     }
 
     renderNoSymmetries() {

tsconfig.json

@@ -9,7 +9,7 @@
         "noUnusedLocals": true,
         "strictNullChecks": true,
         "strictFunctionTypes": true,
-        "module": "commonjs",
+        "module": "esnext",
         "esModuleInterop": true,
         "moduleResolution": "node",
         "importHelpers": true,