Show icon element with either icon image or fa-icon

packages/node_modules/@node-red/editor-client/src/js/ui/diff.js

@@ -498,8 +498,7 @@ RED.diff = (function() {
         nodeDiv.css('backgroundColor',colour);
 
         var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
-        var iconPath = RED.utils.separateIconPath(icon_url);
+        RED.utils.createIconElement(icon_url, iconContainer, false);
-        RED.utils.createIconElement(iconPath.module, iconPath.file, iconContainer, false);
 
         return nodeDiv;
     }

packages/node_modules/@node-red/editor-client/src/js/ui/editor.js

@@ -746,11 +746,11 @@ RED.editor = (function() {
                     var iconDiv = $('<div>',{class:"red-ui-icon-list-icon"}).appendTo(iconList);
                     var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(iconDiv);
                     var colour = RED.utils.getNodeColor(node.type, node._def);
-                    var icon_url = "icons/"+moduleName+"/"+icon;
+                    var icon_url = RED.settings.apiRootUrl+"icons/"+moduleName+"/"+icon;
-                    iconDiv.data('icon',icon_url)
+                    iconDiv.data('icon',icon_url);
                     nodeDiv.css('backgroundColor',colour);
                     var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
-                    RED.utils.createIconElement(moduleName, icon, iconContainer, true);
+                    RED.utils.createIconElement(icon_url, iconContainer, true);
 
                     if (iconPath.module === moduleName && iconPath.file === icon) {
                         iconDiv.addClass("selected");
@@ -820,7 +820,7 @@ RED.editor = (function() {
             var icon_url = RED.utils.getNodeIcon(node._def,node);
             nodeDiv.css('backgroundColor',colour);
             var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
-            var iconElements = RED.utils.createDynamicIconElement(icon_url, iconContainer);
+            RED.utils.createIconElement(icon_url, iconContainer, true);
 
             iconButton.click(function(e) {
                 e.preventDefault();
@@ -834,7 +834,7 @@ RED.editor = (function() {
                 showIconPicker(iconRow,node,iconPath,function(newIcon) {
                     $("#node-settings-icon").text(newIcon||"");
                     var icon_url = RED.utils.getNodeIcon(node._def,{type:node.type,icon:newIcon});
-                    RED.utils.changeIconElement(icon_url, iconElements.image, iconElements.fa);
+                    RED.utils.createIconElement(icon_url, iconContainer, true);
                 });
             })
             $('<div class="uneditable-input" id="node-settings-icon">').text(node.icon).appendTo(iconRow);

packages/node_modules/@node-red/editor-client/src/js/ui/palette.js

@@ -129,10 +129,9 @@ RED.palette = (function() {
     }
 
     function setIcon(element,sf) {
-        var iconElement = element.find(".palette_icon");
-        var faIconElement = element.find("i");
         var icon_url = RED.utils.getNodeIcon(sf._def,sf);
-        RED.utils.changeIconElement(icon_url, iconElement, faIconElement);
+        var iconContainer = element.find(".palette_icon_container");
+        RED.utils.createIconElement(icon_url, iconContainer, true);
     }
 
     function escapeNodeType(nt) {
@@ -170,7 +169,7 @@ RED.palette = (function() {
             if (def.icon) {
                 var icon_url = RED.utils.getNodeIcon(def);
                 var iconContainer = $('<div/>',{class:"palette_icon_container"+(def.align=="right"?" palette_icon_container_right":"")}).appendTo(d);
-                RED.utils.createDynamicIconElement(icon_url, iconContainer);
+                RED.utils.createIconElement(icon_url, iconContainer, true);
             }
 
             d.style.backgroundColor = RED.utils.getNodeColor(nt,def);

packages/node_modules/@node-red/editor-client/src/js/ui/search.js

@@ -203,8 +203,7 @@ RED.search = (function() {
                     nodeDiv.css('backgroundColor',colour);
 
                     var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
-                    var iconPath = RED.utils.separateIconPath(icon_url);
+                    RED.utils.createIconElement(icon_url, iconContainer, true);
-                    RED.utils.createIconElement(iconPath.module, iconPath.file, iconContainer, true);
 
                     var contentDiv = $('<div>',{class:"red-ui-search-result-description"}).appendTo(div);
                     if (node.z) {

packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js

@@ -133,8 +133,7 @@ RED.typeSearch = (function() {
                 nodeDiv.css('backgroundColor',colour);
 
                 var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
-                var iconPath = RED.utils.separateIconPath(icon_url);
+                RED.utils.createIconElement(icon_url, iconContainer, false);
-                RED.utils.createIconElement(iconPath.module, iconPath.file, iconContainer, false);
 
                 if (def.inputs > 0) {
                     $('<div/>',{class:"red-ui-search-result-node-port"}).appendTo(nodeDiv);

packages/node_modules/@node-red/editor-client/src/js/ui/utils.js

@@ -892,42 +892,33 @@ RED.utils = (function() {
         return parts;
     }
 
-    function createIconElement(moduleName, iconName, iconContainer, isLarge) {
+     /**
-        if (moduleName === "font-awesome") {
+      * Create or update an icon element and append it to iconContainer.
+      * @param iconUrl - Url of icon.
+      * @param iconContainer - icon container element with palette_icon_container class.
+      * @param isLarge - whether the icon size is large.
+      */
+    function createIconElement(iconUrl, iconContainer, isLarge) {
+        // Removes the previous icon when icon was changed.
+        var iconElement = iconContainer.find(".palette_icon");
+        if (iconElement.length !== 0) {
+            iconElement.remove();
+        }
+        var faIconElement = iconContainer.find("i");
+        if (faIconElement.length !== 0) {
+            faIconElement.remove();
+        }
+
+        // Show either icon image or font-awesome icon
+        var iconPath = separateIconPath(iconUrl);
+        if (iconPath.module === "font-awesome") {
+            var faIconElement = $('<i/>').appendTo(iconContainer);
             var faLarge = isLarge ? "fa-lg " : "";
-            $('<i class="palette_icon_fa fa fa-fw '+faLarge+iconName+'"></i>').appendTo(iconContainer);
+            faIconElement.addClass("palette_icon_fa fa fa-fw " + faLarge + iconPath.file);
-        } else {
-            var iconUrl = RED.settings.apiRootUrl+"icons/"+moduleName+"/"+iconName;
-            $('<div/>',{class:"palette_icon",style:"background-image: url("+iconUrl+")"}).appendTo(iconContainer);
-        }
-    }
-
-    function createDynamicIconElement(iconUrl, iconContainer) {
-        var imageIconElement = $('<div/>',{class:"palette_icon"}).appendTo(iconContainer);
-        var faIconElement = $('<i/>').appendTo(iconContainer);
-        var iconPath = separateIconPath(iconUrl);
-        if (iconPath.module === "font-awesome") {
-            faIconElement.addClass("palette_icon_fa fa fa-lg fa-fw " + iconPath.file);
         } else {
+            var imageIconElement = $('<div/>',{class:"palette_icon"}).appendTo(iconContainer);
             imageIconElement.css("backgroundImage", "url("+iconUrl+")");
         }
-        var iconElements = {
-            "image": imageIconElement,
-            "fa": faIconElement
-        };
-        return iconElements;
-    }
-
-    function changeIconElement(iconUrl, imageIconElement, faIconElement) {
-        var iconPath = separateIconPath(iconUrl);
-        faIconElement.removeClass();
-        if (iconPath.module === "font-awesome") {
-            imageIconElement.hide();
-            faIconElement.addClass("palette_icon_fa fa fa-lg fa-fw " + iconPath.file);
-        } else {
-            imageIconElement.css("backgroundImage", "url("+iconUrl+")");
-            imageIconElement.show();
-        }
     }
 
     return {
@@ -943,8 +934,6 @@ RED.utils = (function() {
         addSpinnerOverlay: addSpinnerOverlay,
         decodeObject: decodeObject,
         parseContextKey: parseContextKey,
-        createIconElement: createIconElement,
+        createIconElement: createIconElement
-        createDynamicIconElement: createDynamicIconElement,
-        changeIconElement: changeIconElement
     }
 })();

packages/node_modules/@node-red/editor-client/src/js/ui/view.js

@@ -1869,23 +1869,36 @@ RED.view = (function() {
         resetMouseVars();
     }
 
-    function updateIconAttributes(iconUrl, icon, fontAwesomeIcon, d) {
+    function createIconAttributes(iconUrl, icon_group, d) {
-        var isIconImage = true;
+        var fontAwesomeUnicode = null;
         if (iconUrl.indexOf("font-awesome/") === 0) {
             var iconName = iconUrl.substr(13);
             var fontAwesomeUnicode = RED.nodes.fontAwesome.getIconUnicode(iconName);
-            if (fontAwesomeUnicode) {
+            if (!fontAwesomeUnicode) {
-                isIconImage = false;
-                fontAwesomeIcon.text(fontAwesomeUnicode);
-            } else {
                 var iconPath = RED.utils.getDefaultNodeIcon(d._def, d);
-                iconUrl = "icons/"+iconPath.module+"/"+iconPath.file;
+                iconUrl = RED.settings.apiRootUrl+"icons/"+iconPath.module+"/"+iconPath.file;
             }
         }
-        if (isIconImage) {
+        if (fontAwesomeUnicode) {
-            // Hide font-awesome icon.
+            // Since Node-RED workspace uses SVG, i tag cannot be used for font-awesome icon.
-            fontAwesomeIcon.attr("xlink:href",null);
+            // On SVG, use text tag as an alternative.
-            fontAwesomeIcon.text(null);
+            icon_group.append("text")
+                .attr("xlink:href",iconUrl)
+                .attr("class","fa-lg")
+                .attr("x",15)
+                .attr("y",21)
+                .attr("stroke","none")
+                .attr("fill","#ffffff")
+                .attr("text-anchor","middle")
+                .attr("font-family", "FontAwesome")
+                .text(fontAwesomeUnicode);
+        } else {
+            var icon = icon_group.append("image")
+                .attr("xlink:href",iconUrl)
+                .attr("class","node_icon")
+                .attr("x",0)
+                .attr("width","30")
+                .attr("height","30");
 
             var img = new Image();
             img.src = iconUrl;
@@ -1901,15 +1914,7 @@ RED.view = (function() {
                 //    icon_shade_border.attr("d",function(d){return "M "+(d.w-30)+" 1 l 0 "+(d.h-2);});
                 //}
             }
-        } else {
-            // Hide icon image.
-            icon.attr("xlink:href",null);
-            icon.style("display","none");
-
-            fontAwesomeIcon.attr("xlink:href",iconUrl);
         }
-
-        return iconUrl;
     }
 
     function redraw() {
@@ -2155,22 +2160,7 @@ RED.view = (function() {
                             .attr("fill-opacity","0.05")
                             .attr("height",function(d){return Math.min(50,d.h-4);});
 
-                        var icon = icon_group.append("image")
+                        createIconAttributes(icon_url, icon_group, d);
-                            .attr("xlink:href",icon_url)
-                            .attr("class","node_icon")
-                            .attr("x",0)
-                            .attr("width","30")
-                            .attr("height","30");
-
-                        var fontAwesomeIcon = icon_group.append("text")
-                            .attr("xlink:href",icon_url)
-                            .attr("class","fa-lg")
-                            .attr("x",15)
-                            .attr("y",21)
-                            .attr("stroke","none")
-                            .attr("fill","#ffffff")
-                            .attr("text-anchor","middle")
-                            .attr("font-family", "FontAwesome");
 
                         var icon_shade_border = icon_group.append("path")
                             .attr("d",function(d) { return "M 30 1 l 0 "+(d.h-2)})
@@ -2196,8 +2186,6 @@ RED.view = (function() {
                         //    icon_shade.attr("width",35); //icon.attr("x",5);
                         //}
 
-                        updateIconAttributes(icon_url, icon, fontAwesomeIcon, d);
-
                         //icon.style("pointer-events","none");
                         icon_group.style("pointer-events","none");
                     }
@@ -2334,17 +2322,23 @@ RED.view = (function() {
                             });
 
                             if (d._def.icon) {
-                                icon = thisNode.select(".node_icon");
+                                var icon = thisNode.select(".node_icon");
                                 var faIcon = thisNode.select(".fa-lg");
                                 var current_url;
-                                if (icon.attr("xlink:href")) {
+                                if (!icon.empty()) {
                                     current_url = icon.attr("xlink:href");
                                 } else {
                                     current_url = faIcon.attr("xlink:href");
                                 }
                                 var new_url = RED.utils.getNodeIcon(d._def,d);
                                 if (new_url !== current_url) {
-                                    updateIconAttributes(new_url, icon, faIcon, d);
+                                    if (!icon.empty()) {
+                                        icon.remove();
+                                    } else {
+                                        faIcon.remove();
+                                    }
+                                    var iconGroup = thisNode.select(".node_icon_group");
+                                    createIconAttributes(new_url, iconGroup, d);
                                 }
                             }