1 files changed, 15 insertions, 43 deletions

diff --git a/subprojects/frontend/src/graph/GraphTheme.tsx b/subprojects/frontend/src/graph/GraphTheme.tsx
index 50a003e0..bdc01b78 100644
--- a/subprojects/frontend/src/graph/GraphTheme.tsx
+++ b/subprojects/frontend/src/graph/GraphTheme.tsx
@@ -4,9 +4,6 @@
  * SPDX-License-Identifier: EPL-2.0
  */
 
-import cancelSVG from '@material-icons/svg/svg/cancel/baseline.svg?raw';
-import labelSVG from '@material-icons/svg/svg/label/baseline.svg?raw';
-import labelOutlinedSVG from '@material-icons/svg/svg/label/outline.svg?raw';
 import {
   alpha,
   styled,
@@ -16,8 +13,6 @@ import {
 import { lch } from 'd3-color';
 import { range } from 'lodash-es';
 
-import svgURL from '../utils/svgURL';
-
 import obfuscateColor from './obfuscateColor';
 
 function createEdgeColor(
@@ -69,32 +64,16 @@ function createTypeHashStyles(
   return result;
 }
 
-function iconStyle(
-  svg: string,
-  color: string,
-  noEmbedIcons?: boolean,
-): CSSObject {
-  if (noEmbedIcons) {
-    return {
-      fill: color,
-    };
-  }
-  return {
-    maskImage: svgURL(svg),
-    background: color,
-  };
-}
-
 export function createGraphTheme({
   theme,
   colorNodes,
   hexTypeHashes,
-  noEmbedIcons,
+  useOpacity,
 }: {
   theme: Theme;
   colorNodes: boolean;
   hexTypeHashes: string[];
-  noEmbedIcons?: boolean;
+  useOpacity?: boolean;
 }): CSSObject {
   const shadowAlapha = theme.palette.mode === 'dark' ? 0.32 : 0.24;
 
@@ -120,13 +99,15 @@ export function createGraphTheme({
     '.node-INDIVIDUAL .node-outline': {
       strokeWidth: 2,
     },
-    '.node-shadow.node-bg': noEmbedIcons
+    '.node-shadow.node-bg': useOpacity
       ? {
-          // Inkscape can't handle opacity in exported SVG.
+          // Inkscape can't handle RGBA in exported SVG.
           fill: theme.palette.text.primary,
           opacity: shadowAlapha,
         }
       : {
+          // But using `opacity` with the transition animation leads to flashing shadows,
+          // so we still use RGBA whenever possible.
           fill: alpha(theme.palette.text.primary, shadowAlapha),
         },
     '.node-exists-UNKNOWN .node-outline': {
@@ -147,24 +128,15 @@ export function createGraphTheme({
     },
     ...createEdgeColor('UNKNOWN', theme.palette.text.secondary, 'none'),
     ...createEdgeColor('ERROR', theme.palette.error.main),
-    ...(noEmbedIcons
-      ? {}
-      : {
-          '.icon': {
-            maskSize: '12px 12px',
-            maskPosition: '50% 50%',
-            maskRepeat: 'no-repeat',
-            width: '100%',
-            height: '100%',
-          },
-        }),
-    '.icon-TRUE': iconStyle(labelSVG, theme.palette.text.primary, noEmbedIcons),
-    '.icon-UNKNOWN': iconStyle(
-      labelOutlinedSVG,
-      theme.palette.text.secondary,
-      noEmbedIcons,
-    ),
-    '.icon-ERROR': iconStyle(cancelSVG, theme.palette.error.main, noEmbedIcons),
+    '.icon-TRUE': {
+      fill: theme.palette.text.primary,
+    },
+    '.icon-UNKNOWN': {
+      fill: theme.palette.text.secondary,
+    },
+    '.icon-ERROR': {
+      fill: theme.palette.error.main,
+    },
     'text.label-UNKNOWN': {
       fill: theme.palette.text.secondary,
     },