1 files changed, 10 insertions, 15 deletions
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index 608e4af7c..13e3189fb 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -778,9 +778,6 @@ export const WarningBox = styled(ErrorBox)`
   border-color: #ffecb5;
 `;
 
-import settingsIcon from "../../../static/img/settings_black_24dp.svg";
-import wifiIcon from "../../../static/img/wifi.svg";
-
 export const NavigationHeaderHolder = styled.div`
   width: 100%;
   display: flex;
@@ -809,27 +806,25 @@ export const NavigationHeader = styled.div`
     line-height: 35px;
   }
 
-  & > a > div.settings-icon {
-    mask: url(${settingsIcon}) no-repeat center;
-    background-color: white;
-    width: 24px;
-    height: 24px;
-    margin-left: auto;
-    margin-right: 8px;
-    padding: 4px;
-  }
   & > a.active {
     background-color: #f8faf7;
     color: #0042b2;
     font-weight: bold;
   }
-  & > a.active > div.settings-icon {
-    background-color: #0042b2;
+`;
+
+export const SvgIcon = styled.div<{ color: string }>`
+  & > svg {
+    fill: ${({ color }) => color};
   }
+  width: 24px;
+  height: 24px;
+  margin-left: auto;
+  margin-right: 8px;
+  padding: 4px;
 `;
 
 export const Icon = styled.div`
-  mask: url(${wifiIcon}) no-repeat center;
   background-color: gray;
   width: 24px;
   height: 24px;