Use material icon

client/src/styles/partials/bdsettings/collection.scss

@@ -35,20 +35,23 @@
     }
 
     .bd-newCollectionItem {
-        color: #ccc;
-        font-size: 24px;
-        width: 20px;
-        height: 20px;
-        margin-top: 5px;
-        text-align: center;
         display: flex;
+        cursor: pointer;
+        align-self: flex-end;
         justify-content: center;
         align-items: center;
-        align-self: flex-end;
-        cursor: pointer;
+        margin-right: 2px;
+
+        svg {
+            width: 16px;
+            height: 16px;
+            fill: #ccc;
+        }
 
         &:hover {
-            color: #FFF;
+            svg {
+                fill: #FFF;
+            }
         }
     }
 }

client/src/ui/components/bd/setting/Collection.vue

@@ -14,18 +14,18 @@
             <Setting :setting="s" :key="s.id" />
             <div class="bd-removeCollectionItem" @click="removeItem(s)"><MiMinus/></div>
         </div>
-        <div class="bd-newCollectionItem" @click="addItem">+</div>
+        <div class="bd-newCollectionItem" @click="addItem"><MiPlus/></div>
     </div>
 </template>
 
 <script>
     import Setting from './Setting.vue';
-    import { MiMinus } from '../../common';
+    import { MiMinus, MiPlus } from '../../common';
 
     export default {
         props: ['setting'],
         components: {
-            MiMinus
+            MiMinus, MiPlus
         },
         methods: {
             removeItem(item) {