diff --git a/src/components/TopBar.js b/src/components/TopBar.js
index cd935c6..b0d03d3 100644
--- a/src/components/TopBar.js
+++ b/src/components/TopBar.js
@@ -10,7 +10,7 @@ import { makeStyles } from "@material-ui/core/styles";
 import Tooltip from "@material-ui/core/Tooltip";
 import IconButton from "@material-ui/core/IconButton";
 import ReactIcon from "@mdi/react";
-import { mdiMap, mdiGithub } from "@mdi/js";
+import { mdiMap, mdiGithub, mdiMagnify } from "@mdi/js";
 
 export type TopBarProps = {
   connected: boolean,
@@ -77,7 +77,9 @@ const Search = (props: SearchBarProps) => {
   const classes = useSearchStyles();
   return (
     <div className={classes.search}>
-      <i className={`mdi mdi-magnify ${classes.searchIcon}`}></i>
+      <span className={classes.searchIcon}>
+        <ReactIcon path={mdiMagnify} size={1} />
+      </span>
       <InputBase placeholder="Search…" type="search"
         onChange={(e) => props.onSearch(e.target.value)}
         classes={{
diff --git a/src/config/icon.js b/src/config/icon.js
index 54a598b..958a506 100644
--- a/src/config/icon.js
+++ b/src/config/icon.js
@@ -34,12 +34,12 @@ const iconChainUtils = <T> (cb: (x: T, p?: IconPropHelper) => Icon,
   );
 
 export const svg = (data: string, props?: IconPropHelper): Icon => {
-  const propColor = ((c: Color | (State) => Color) => (state: State) => {
+  const propColor = ((c: ?Color | (State) => Color) => (state: State) => {
     if (typeof c === "function") {
       return c(state);
     }
     return c;
-  })(props?.color ?? "black");
+  })(props?.color);
   return {
     render: (state) => (
       <ReactIcon path={data} size={props?.size ?? 1.5}