Update toolbar icons

src/dom_components/model/Component.js

@@ -1064,36 +1064,29 @@ export default class Component extends Model.extend(Styleable) {
     const model = this;
     const ppfx = (em && em.getConfig('stylePrefix')) || '';
 
-    if (!model.get('toolbar')) {
-      var tb = [];
-      if (model.collection) {
+    if (!model.get('toolbar') && em) {
+      const tb = [];
+      model.collection &&
         tb.push({
-          attributes: { class: 'fa fa-arrow-up' },
+          label: em.getIcon('arrowUp'),
           command: ed => ed.runCommand('core:component-exit', { force: 1 }),
         });
-      }
-      if (model.get('draggable')) {
+      model.get('draggable') &&
         tb.push({
-          attributes: {
-            class: `fa fa-arrows ${ppfx}no-touch-actions`,
-            draggable: true,
-          },
-          //events: hasDnd(this.em) ? { dragstart: 'execCommand' } : '',
+          attributes: { class: `${ppfx}no-touch-actions`, draggable: true },
+          label: em.getIcon('move'),
           command: 'tlb-move',
         });
-      }
-      if (model.get('copyable')) {
+      model.get('copyable') &&
         tb.push({
-          attributes: { class: 'fa fa-clone' },
+          label: em.getIcon('copy'),
           command: 'tlb-clone',
         });
-      }
-      if (model.get('removable')) {
+      model.get('removable') &&
         tb.push({
-          attributes: { class: 'fa fa-trash-o' },
+          label: em.getIcon('delete'),
           command: 'tlb-delete',
         });
-      }
       model.set('toolbar', tb);
     }
   }

src/editor/config/config.js

@@ -167,6 +167,11 @@ export default {
     move: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M13,6V11H18V7.75L22.25,12L18,16.25V13H13V18H16.25L12,22.25L7.75,18H11V13H6V16.25L1.75,12L6,7.75V11H11V6H7.75L12,1.75L16.25,6H13Z"/></svg>',
     plus: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" /></svg>',
     caret: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M7,10L12,15L17,10H7Z" /></svg>',
+    delete:
+      '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" /></svg>',
+    copy: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" /></svg>',
+    arrowUp:
+      '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z" /></svg>',
   },
 
   // Dom element

src/editor/model/Editor.js

@@ -779,6 +779,11 @@ export default class EditorModel extends Model {
     return (this.getCurrentFrame() || {}).model;
   }
 
+  getIcon(icon) {
+    const icons = this.getConfig('icons') || {};
+    return icons[icon] || '';
+  }
+
   /**
    * Return the count of changes made to the content and not yet stored.
    * This count resets at any `store()`

src/styles/scss/_gjs_canvas.scss

@@ -304,11 +304,9 @@ $guide_pad: 5px !default;
 }
 
 .#{$app-prefix}toolbar-item {
-  padding: 5px 7px;
-  font-size: 0.8rem;
-  cursor: pointer;
   width: 26px;
-  vertical-align: middle;
+  padding: 5px;
+  cursor: pointer;
   display: inline-block;
 
   svg {