Remove vue-material-design-icons and uses iconfont instead.

package-lock.json

@@ -3784,6 +3784,11 @@
       "integrity": "sha1-WQTcU3w57G2+/q6QIycTX6hRHxI=",
       "dev": true
     },
+    "material-design-icons": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/material-design-icons/-/material-design-icons-3.0.1.tgz",
+      "integrity": "sha1-mnHEh0chjrylHlGmbaaCA4zct78="
+    },
     "math-expression-evaluator": {
       "version": "1.2.17",
       "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",
@@ -6060,11 +6065,6 @@
         "vue-template-es2015-compiler": "1.6.0"
       }
     },
-    "vue-material-design-icons": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-1.0.0.tgz",
-      "integrity": "sha512-Do4M+l6l9+Wf1MQCWcAeNvSSYpynxddtqMRnhCRLFys58OU3z34AI7aYrhEo1SpvHc1KHcgQq1x4K7LCZfYSYw=="
-    },
     "vue-router": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.1.tgz",

package.json

@@ -11,8 +11,8 @@
     "axios": "^0.17.1",
     "bootstrap": "^3.3.7",
     "element-ui": "^2.0.11",
+    "material-design-icons": "^3.0.1",
     "vue": "^2.0.1",
-    "vue-material-design-icons": "^1.0.0",
     "vuex": "^3.0.1"
   },
   "devDependencies": {

src/admin/components/collections-list.vue

@@ -14,8 +14,8 @@
             </el-table-column>
             <el-table-column label="Ações" width="120">
                 <template slot-scope="scope">
-                    <el-button size="small" type="text" @click.native="shareCollection(scope.row.id)"><share-variant-icon></share-variant-icon></el-button>
+                    <el-button size="small" type="text" @click.native="shareCollection(scope.row.id)"><i class="material-icons">share</i></el-button>
-                    <el-button size="small" type="text" @click.native="showMoreCollection(scope.row.id)"><dots-horizontal-icon></dots-horizontal-icon></el-button>
+                    <el-button size="small" type="text" @click.native="showMoreCollection(scope.row.id)"><i class="material-icons">more_vert</i></el-button>
                 </template>
             </el-table-column>
         </el-table>
@@ -24,8 +24,6 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex'
-import ShareVariantIcon from "vue-material-design-icons/share-variant.vue"
-import DotsHorizontalIcon from "vue-material-design-icons/dots-horizontal.vue"
 
 export default {
     name: 'CollectionsList',
@@ -34,10 +32,6 @@ export default {
             multipleSelection: []
         }
     },
-    components: {
-        ShareVariantIcon,
-        DotsHorizontalIcon
-    },
     methods: {
         ...mapActions('collection', [
             'fetchCollections'

src/admin/components/itens-list.vue

@@ -14,8 +14,8 @@
             </el-table-column>
             <el-table-column label="Ações" width="120">
                 <template slot-scope="scope">
-                    <el-button size="small" type="text" @click.native="shareItem(scope.row.id)"><share-variant-icon></share-variant-icon></el-button>
+                    <el-button size="small" type="text" @click.native="shareItem(scope.row.id)"><i class="material-icons">share</i></el-button>
-                    <el-button size="small" type="text" @click.native="showMoreItem(scope.row.id)"><dots-horizontal-icon></dots-horizontal-icon></el-button>
+                    <el-button size="small" type="text" @click.native="showMoreItem(scope.row.id)"><i class="material-icons">more_vert</i></el-button>
                 </template>
             </el-table-column>
         </el-table>
@@ -24,8 +24,6 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex'
-import ShareVariantIcon from "vue-material-design-icons/share-variant.vue"
-import DotsHorizontalIcon from "vue-material-design-icons/dots-horizontal.vue"
 
 export default {
     name: 'ItensList',
@@ -34,10 +32,6 @@ export default {
             multipleSelection: []
         }
     },
-    components: {
-        ShareVariantIcon,
-        DotsHorizontalIcon
-    },
     methods: {
         ...mapActions('item', [
             'fetchItens'

src/admin/pages/item-creation-page.vue

@@ -9,29 +9,30 @@
                 <el-input type="textarea" v-model="form.desc"></el-input>
             </el-form-item>
             <el-form-item label="Status">
-                <el-select v-model="form.region" placeholder="Selecione um status">
+                <el-select v-model="form.status" placeholder="Selecione um status">
                     <el-option label="Públicado" value="publish"></el-option>
                     <el-option label="Rascunho" value="draft"></el-option>
                     <el-option label="Privado" value="private"></el-option>
                     <el-option label="Lixo" value="trash"></el-option>
                 </el-select>
             </el-form-item>
-            <el-upload
+            <el-form-item>
-                class="upload-demo"
+                <el-upload
-                drag
+                    class="upload-demo"
-                action="https://jsonplaceholder.typicode.com/posts/"
+                    drag
-                :on-preview="handlePreview"
+                    action="https://jsonplaceholder.typicode.com/posts/"
-                :on-remove="handleRemove">
+                    :on-preview="handlePreview"
-                <i class="el-icon-upload"></i>
+                    :on-remove="handleRemove">
-                <div class="el-upload__text">Arraste uma imagem aqui <em>ou clique para enviar</em></div>
+                    <i class="el-icon-upload"></i>
-                <div class="el-upload__tip" slot="tip">imagens em formato jpg/png</div>
+                    <div class="el-upload__text">Arraste uma imagem aqui <em>ou clique para enviar</em></div>
-            </el-upload>
+                    <div class="el-upload__tip" slot="tip">imagens em formato jpg/png</div>
+                </el-upload>
+            </el-form-item>
             <el-form-item>
                 <el-button type="primary" @click="onSubmit">Criar</el-button>
                 <el-button>Cancelar</el-button>
             </el-form-item>
         </el-form>
-        <i class="el-icon-edit"></i>
     </div>
 </template>
 
@@ -59,6 +60,7 @@ export default {
             'getItens'
         ]),
         onSubmit() {
+            console.log(this.form.name);
         }
     },
     computed: {

src/admin/scss/tainacan-admin.scss

@@ -2,8 +2,9 @@
 $--color-primary: teal;
 
 /* icon font path, required */
-//$--font-path: '../../../node_modules/element-theme-chalk/lib/fonts';
+//$--font-path: '../../assets/css/fonts/material-icons.css';
 
+@import "../../assets/css/fonts/material-icons.css";
 @import "../../../node_modules/element-ui/packages/theme-chalk/src/index";
 
 body.tainacan-admin-page #adminmenumain {
@@ -19,4 +20,5 @@ body.tainacan-admin-page #adminmenumain {
     right: 0;
     width: 100%;
     z-index: 99999999999;
+    overflow-y: auto;
 }

src/assets/css/fonts/material-icons.css

@@ -0,0 +1,36 @@
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
+  src: local('Material Icons'),
+       local('MaterialIcons-Regular'),
+       url(MaterialIcons-Regular.woff2) format('woff2'),
+       url(MaterialIcons-Regular.woff) format('woff'),
+       url(MaterialIcons-Regular.ttf) format('truetype');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;  /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}