Add custom icons.

src/prog/dashboard2/package.json

@@ -15,6 +15,7 @@
     "axios": "^0.16.2",
     "components": "^0.1.0",
     "ionicons": "^3.0.0",
+    "node-sass": "^4.5.3",
     "onsenui": "~2.4.0",
     "vue": "^2.3.3",
     "vue-onsenui": "~2.0.0",
@@ -23,7 +24,6 @@
   "devDependencies": {
     "autoprefixer": "^6.7.2",
     "babel-core": "^6.22.1",
-    "sw-precache-webpack-plugin": "^0.9.1",
     "babel-eslint": "^7.1.1",
     "babel-loader": "^6.2.10",
     "babel-plugin-transform-runtime": "^6.22.0",
@@ -36,10 +36,10 @@
     "cross-env": "^4.0.0",
     "css-loader": "^0.28.0",
     "eslint": "^3.19.0",
+    "eslint-config-standard": "^6.2.1",
     "eslint-friendly-formatter": "^2.0.7",
     "eslint-loader": "^1.7.1",
     "eslint-plugin-html": "^2.0.0",
-    "eslint-config-standard": "^6.2.1",
     "eslint-plugin-promise": "^3.4.0",
     "eslint-plugin-standard": "^2.0.1",
     "eventsource-polyfill": "^0.9.6",
@@ -49,18 +49,20 @@
     "friendly-errors-webpack-plugin": "^1.1.3",
     "html-webpack-plugin": "^2.28.0",
     "http-proxy-middleware": "^0.17.3",
-    "webpack-bundle-analyzer": "^2.2.1",
-    "semver": "^5.3.0",
-    "shelljs": "^0.7.6",
     "opn": "^4.0.2",
     "optimize-css-assets-webpack-plugin": "^1.3.0",
     "ora": "^1.2.0",
     "rimraf": "^2.6.0",
+    "sass-loader": "^6.0.6",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
+    "sw-precache-webpack-plugin": "^0.9.1",
     "url-loader": "^0.5.8",
     "vue-loader": "^12.1.0",
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.3.3",
     "webpack": "^2.6.1",
+    "webpack-bundle-analyzer": "^2.2.1",
     "webpack-dev-middleware": "^1.10.0",
     "webpack-hot-middleware": "^2.18.0",
     "webpack-merge": "^4.1.0"

src/prog/dashboard2/src/AppTabbar.vue

@@ -6,7 +6,6 @@
         <v-ons-icon icon="ion-navicon, material:md-menu"></v-ons-icon>
       </v-ons-toolbar-button>
     </custom-toolbar>
-
     <v-ons-tabbar
       position="auto"
       :tabs="tabs"
@@ -39,12 +38,12 @@ export default {
         },
         {
           label: 'Sprinklers',
-          icon: this.md() ? null : 'icn-sprinklers',
+          icon: this.md() ? null : 'icon-sprinklers',
           page: Sprinklers
         },
         {
           label: 'Shutters',
-          icon: this.md() ? null : 'ion-film-marker',
+          icon: this.md() ? null : 'icon-shutters',
           page: Shutters
         },
         {
@@ -80,9 +79,24 @@ export default {
   }
 }
 </script>
-<style>
-.icn-sprinklers {
-  background-image: url("assets/logo.png");
+<style lang="scss">
+@font-face {
+  font-family: 'domo';
+  src: url('assets/fonts/domo.woff2') format('woff2'),
+       url('assets/fonts/domo.woff') format('woff'),
+       url('assets/fonts/domo.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+#app {
+	font-family: 'ratio', Helvetica, Arial, sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-align: center;
+	color: #d3d3d3;
+	margin: 0;
 }
-</style>
 
+.fa-icon-shutters:before { font-family: "domo"; content: '\e800'; }
+.fa-icon-sprinklers:before { font-family: "domo"; content: '\e801'; }
+</style>

src/prog/dashboard2/src/pages/Sprinklers.vue

@@ -6,3 +6,5 @@
 
 <script>
 </script>
+<style>
+</style>