From e97f4c405489e70e260c97a19a370930bd96aa36 Mon Sep 17 00:00:00 2001
From: Mauricio Bonani <bonanitech@gmail.com>
Date: Sun, 3 Apr 2022 18:09:08 -0400
Subject: [PATCH] Make tab icon themeable

---
 .../editor-client/src/js/ui/common/tabs.js    |  2 +-
 .../editor-client/src/sass/colors.scss        |  2 ++
 .../editor-client/src/sass/tabs.scss          | 27 ++++++++++++-------
 3 files changed, 20 insertions(+), 11 deletions(-)

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 = $("<a/>",{href:"#"+tab.id, class:"red-ui-tab-label"}).appendTo(li);
                 if (tab.icon) {
-                    $('<img src="'+tab.icon+'" class="red-ui-tab-icon"/>').appendTo(link);
+                    $('<i>',{class:"red-ui-tab-icon", style:"mask-image: url("+tab.icon+"); -webkit-mask-image: url("+tab.icon+");"}).appendTo(link);
                 } else if (tab.iconClass) {
                     $('<i>',{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;