fix duplicate icons

ui/components/Icon.tsx

@@ -24,7 +24,6 @@ import NavigateNextIcon from "@material-ui/icons/NavigateNext";
 import PauseIcon from "@material-ui/icons/Pause";
 import PersonIcon from "@material-ui/icons/Person";
 import PlayIcon from "@material-ui/icons/PlayArrow";
-import Policy from "@material-ui/icons/Policy";
 import Remove from "@material-ui/icons/Remove";
 import RemoveCircleIcon from "@material-ui/icons/RemoveCircle";
 import SaveAltIcon from "@material-ui/icons/SaveAlt";
@@ -266,10 +265,10 @@ function getIcon(i: IconType) {
       return PlayIcon;
 
     case IconType.PoliciesIcon:
-      return PoliciesIcon;
+      return () => <PoliciesIcon filled={false} />;
 
     case IconType.Policy:
-      return Policy;
+      return () => <PoliciesIcon filled />;
 
     case IconType.PolicyConfigsIcon:
       return PolicyConfigsIcon;

ui/components/NavIcons/PoliciesIcon.tsx

@@ -1,31 +1,36 @@
 import * as React from "react";
-
-function PoliciesIcon() {
+import { useTheme } from "styled-components";
+function PoliciesIcon({ filled }) {
+  const theme = useTheme();
   return (
     <svg
+      width="24"
+      height="24"
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      strokeLinecap="round"
-      strokeMiterlimit={10}
     >
-      <g>
+      <g opacity={filled ? "0" : "100"}>
         <path
-          className="path-fill"
-          d="m12,4.09l6,2.58v4.56c-.54,6.18-4.84,8.25-6,8.7-1.16-.45-5.46-2.52-6-8.7v-4.56s6-2.58,6-2.58m0-1.09h0s-7,3.02-7,3.02v5.26c.66,7.85,7,9.71,7,9.71h0s6.34-1.86,7-9.71v-5.26s-7-3.01-7-3.01h0Z"
+          d="M12 4.09L18 6.67V11.23C17.46 17.41 13.16 19.48 12 19.93C10.84 19.48 6.54 17.41 6 11.23V6.67L12 4.09ZM12 3L5 6.02V11.28C5.66 19.13 12 20.99 12 20.99C12 20.99 18.34 19.13 19 11.28V6.02L12 3.01V3Z"
+          fill={theme.colors.neutral30}
+        />
+        <path
+          d="M11.98 10.0601C12.51 10.0601 13.01 10.2701 13.38 10.6401C14.15 11.4101 14.15 12.6701 13.38 13.4401C13.01 13.8101 12.51 14.0201 11.98 14.0201C11.45 14.0201 10.95 13.8101 10.58 13.4401C9.81 12.6701 9.81 11.4101 10.58 10.6401C10.95 10.2701 11.45 10.0601 11.98 10.0601ZM11.98 9.06006C11.22 9.06006 10.45 9.35006 9.87 9.93006C8.71 11.0901 8.71 12.9801 9.87 14.1401C10.45 14.7201 11.21 15.0101 11.98 15.0101C12.75 15.0101 13.51 14.7201 14.09 14.1401C15.25 12.9801 15.25 11.0901 14.09 9.93006C13.51 9.35006 12.75 9.06006 11.98 9.06006Z"
+          fill={theme.colors.neutral30}
         />
-      </g>
-      <g id="explorer">
         <path
-          className="path-fill"
-          d="m11.98,10.06c.53,0,1.03.21,1.4.58.77.77.77,2.03,0,2.8-.37.37-.87.58-1.4.58s-1.03-.21-1.4-.58c-.77-.77-.77-2.03,0-2.8.37-.37.87-.58,1.4-.58m0-1c-.76,0-1.53.29-2.11.87-1.16,1.16-1.16,3.05,0,4.21.58.58,1.34.87,2.11.87s1.53-.29,2.11-.87c1.16-1.16,1.16-3.05,0-4.21-.58-.58-1.34-.87-2.11-.87h0Z"
+          d="M14 14.0601L16.71 16.7701"
+          stroke={theme.colors.neutral30}
+          stroke-miterlimit="10"
         />
-        <line
-          className="stroke-fill"
-          x1="14"
-          y1="14.06"
-          x2="16.71"
-          y2="16.77"
+      </g>
+      <g opacity={filled ? "100" : "0"}>
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M12 3L5 6.02V11.28C5.66 19.13 12 20.99 12 20.99C12 20.99 15.1702 20.0599 17.2605 16.7395L16.6464 17.3536L13.7359 14.443C13.2168 14.821 12.6016 15.0101 11.98 15.0101C11.21 15.0101 10.45 14.7201 9.87 14.1401C8.71 12.9801 8.71 11.0901 9.87 9.93006C10.45 9.35006 11.22 9.06006 11.98 9.06006C12.75 9.06006 13.51 9.35006 14.09 9.93006C15.1208 10.9609 15.2356 12.5681 14.4344 13.7273L17.3318 16.6247C18.1634 15.2653 18.812 13.5156 19 11.28V6.02L12 3.01V3ZM11.98 10.0601C12.51 10.0601 13.01 10.2701 13.38 10.6401C14.15 11.4101 14.15 12.6701 13.38 13.4401C13.01 13.8101 12.51 14.0201 11.98 14.0201C11.45 14.0201 10.95 13.8101 10.58 13.4401C9.81 12.6701 9.81 11.4101 10.58 10.6401C10.95 10.2701 11.45 10.0601 11.98 10.0601Z"
+          fill={theme.colors.neutral30}
         />
       </g>
     </svg>

ui/components/Policies/Utils/PolicyMode.tsx

@@ -17,14 +17,14 @@ const PolicyMode = ({ modeName, showName = false }: Props) => {
     case "audit":
       mode = {
         name: "audit",
-        icon: <Icon type={IconType.Policy} color="neutral30" size="base" />,
+        icon: <Icon type={IconType.Policy} color="neutral30" size="large" />,
       };
       break;
     case "admission":
       mode = {
         name: "enforce",
         icon: (
-          <Icon type={IconType.VerifiedUser} color="neutral30" size="base" />
+          <Icon type={IconType.VerifiedUser} color="neutral30" size="medium" />
         ),
       };
       break;