Add icon property to Components

src/commands/view/SelectComponent.js

@@ -250,7 +250,7 @@ module.exports = {
     if(!model || !model.get('badgable'))
       return;
     var badge = this.getBadge();
-    badge.innerHTML = model.getName();
+    badge.innerHTML = model.getIcon() + model.getName();
     var bStyle = badge.style;
     var u = 'px';
     bStyle.display = 'block';

src/dom_components/model/Component.js

@@ -62,6 +62,9 @@ module.exports = Backbone.Model.extend({
     // Content of the component (not escaped) which will be appended before children rendering
     content: '',
 
+    // Component icon, this string will be inserted before the name, eg. '<i class="fa fa-square-o"></i>'
+    icon: '',
+
     // Component related style
     style: {},
 
@@ -261,6 +264,15 @@ module.exports = Backbone.Model.extend({
     return customName || name;
   },
 
+  /**
+   * Get the icon string
+   * @return {string}
+   */
+  getIcon() {
+    let icon = this.get('icon');
+    return icon ? icon + ' ' : '';
+  },
+
   /**
    * Return HTML string of the component
    * @param {Object} opts Options

src/navigator/view/ItemView.js

@@ -13,6 +13,7 @@ module.exports = Backbone.View.extend({
     <div class="<%= prefix %>title <%= addClass %>">
     	<i id="<%= prefix %>caret" class="fa fa-chevron-right <%= caretCls %>"></i>
   		<i class="fa fa-pencil <%= editBtnCls %>"></i>
+      <%= icon %>
   		<input class="<%= ppfx %>no-app <%= inputNameCls %>" value="<%= title %>" readonly>
     </div>
   </div>
@@ -261,6 +262,7 @@ module.exports = Backbone.View.extend({
 
     this.$el.html( this.template({
       title: model.getName(),
+      icon: model.getIcon(),
       addClass: (count ? '' : pfx+'no-chld'),
       editBtnCls: this.editBtnCls,
       inputNameCls: this.inputNameCls,