Adjust icons in component badge

src/commands/view/SelectComponent.js

@@ -268,12 +268,18 @@ module.exports = {
     var $el = $(el);
     var canvas = this.canvas;
     var config = canvas.getConfig();
+    const ppfx = config.pStylePrefix || '';
     var customeLabel = config.customBadgeLabel;
     this.cacheEl = el;
     var model = $el.data('model');
     if (!model || !model.get('badgable')) return;
     var badge = this.getBadge();
-    var badgeLabel = model.getIcon() + model.getName();
+    const icon = model.getIcon();
+    const clsBadge = `${ppfx}badge`;
+    let badgeLabel = `${
+      icon ? `<div class="${clsBadge}__icon">${icon}</div>` : ''
+    }
+      <div class="${clsBadge}__name">${model.getName()}</div>`;
     badgeLabel = customeLabel ? customeLabel(model) : badgeLabel;
     badge.innerHTML = badgeLabel;
     var bStyle = badge.style;

src/styles/scss/_gjs_canvas.scss

@@ -88,6 +88,23 @@ $guide_pad: 5px;
       }
     }
   }
+
+  &badge {
+    &__icon {
+      vertical-align: middle;
+      display: inline-block;
+      width: 15px;
+      height: 15px;
+
+      svg {
+        fill: currentColor;
+      }
+    }
+    &__name {
+      display: inline-block;
+      vertical-align: middle;
+    }
+  }
 }
 
 .#{$cv-prefix}canvas {