diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js
index 0541c79e0..d471d206a 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js
@@ -670,7 +670,7 @@ RED.tabs = (function() {
}
var link = $("",{href:"#"+tab.id, class:"red-ui-tab-label"}).appendTo(li);
if (tab.icon) {
- $('
').appendTo(link);
+ $('',{class:"red-ui-tab-icon", style:"mask-image: url("+tab.icon+"); -webkit-mask-image: url("+tab.icon+");"}).appendTo(link);
} else if (tab.iconClass) {
$('',{class:"red-ui-tab-icon "+tab.iconClass}).appendTo(link);
}
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
index e414476b0..138e38255 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
@@ -307,6 +307,8 @@ $icons-flow-color: #808080;
$spinner-color: #999;
+$tab-icon-color: #dedede;
+
// Deprecated
$text-color-green: $text-color-success;
$info-text-code-color: $text-color-code;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss b/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss
index b05a3575f..b9e0f5add 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss
@@ -342,21 +342,28 @@
}
-img.red-ui-tab-icon {
- margin-left: -8px;
- margin-right: 3px;
- margin-top: -2px;
- opacity: 0.1;
- width: 20px;
- height: 20px;
- vertical-align: middle;
-}
i.red-ui-tab-icon {
opacity: 0.7;
width: 18px;
height: 20px;
+ &:not(.fa) {
+ display: inline-block;
+ margin-left: -8px;
+ margin-right: 3px;
+ margin-top: -2px;
+ opacity: 1;
+ width: 20px;
+ height: 20px;
+ vertical-align: middle;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ background-color: $tab-icon-color;
+ }
}
-
.red-ui-tabs-badges {
position: absolute;
top:0px;