Dark mode: search icon (#14201)

app/images/search-black.svg

@@ -1,6 +0,0 @@
-<svg fill="none" height="20" width="20" xmlns="http://www.w3.org/2000/svg">
-    <g clip-rule="evenodd" fill="#000" fill-rule="evenodd">
-        <path d="M9.167 3.333a5.833 5.833 0 100 11.667 5.833 5.833 0 000-11.667zm-7.5 5.834a7.5 7.5 0 1115 0 7.5 7.5 0 01-15 0z"/>
-        <path d="M13.286 13.286a.833.833 0 011.178 0l3.625 3.625a.833.833 0 11-1.178 1.178l-3.625-3.625a.833.833 0 010-1.178z"/>
-    </g>
-</svg>

app/images/search.svg

@@ -1,3 +0,0 @@
-<svg height="17" width="17" xmlns="http://www.w3.org/2000/svg">
-    <path d="M2.019 6.906c0-2.656 2.231-4.887 4.887-4.887s4.782 2.125 4.782 4.887a4.761 4.761 0 01-4.782 4.782c-2.762 0-4.887-2.126-4.887-4.782zm14.556 8.181l-4.25-4.25C13.175 9.67 13.6 8.288 13.6 6.8 13.706 3.081 10.625 0 6.906 0 3.081 0 0 3.081 0 6.906s3.081 6.907 6.906 6.907c1.275 0 2.55-.426 3.507-1.063l4.25 4.25z" fill="#9b9b9b"/>
-</svg>

ui/pages/import-token/token-search/token-search.component.js

@@ -59,7 +59,10 @@ export default class TokenSearch extends Component {
   renderAdornment() {
     return (
       <InputAdornment position="start" style={{ marginRight: '12px' }}>
-        <img src="images/search.svg" width="17" height="17" alt="" />
+        <i
+          className="fa fa-search"
+          style={{ color: 'var(--color-icon-muted)' }}
+        />
       </InputAdornment>
     );
   }

ui/pages/swaps/searchable-item-list/__snapshots__/searchable-item-list.test.js.snap

@@ -11,11 +11,8 @@ exports[`SearchableItemList renders the component with initial props 1`] = `
       class="MuiInputAdornment-root MuiInputAdornment-positionStart"
       style="margin-right: 12px;"
     >
-      <img
-        alt=""
-        height="17"
-        src="images/search.svg"
-        width="17"
+      <i
+        class="fa fa-search fa-lg"
       />
     </div>
     <input

ui/pages/swaps/searchable-item-list/list-item-search/list-item-search.component.js

@@ -12,7 +12,10 @@ import { getCurrentChainId } from '../../../../selectors/selectors';
 
 const renderAdornment = () => (
   <InputAdornment position="start" style={{ marginRight: '12px' }}>
-    <img src="images/search.svg" width="17" height="17" alt="" />
+    <i
+      className="fa fa-search fa-lg"
+      style={{ color: 'var(--color-icon-muted)' }}
+    />
   </InputAdornment>
 );
 

ui/pages/swaps/searchable-item-list/list-item-search/list-item-search.stories.js

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import ListItemSearch from '.';
+
+export default {
+  title: 'Pages/Swaps/SearchableItemList/ListItemSearch',
+  id: __filename,
+  argTypes: {
+    onSearch: {
+      action: 'onSearch',
+    },
+    error: {
+      control: 'text',
+    },
+    listToSearch: {
+      control: 'select',
+    },
+    fuseSearchKeys: {
+      control: 'select',
+    },
+    searchPlaceholderText: {
+      control: 'text',
+    },
+    defaultToAll: {
+      control: 'boolean',
+    },
+    shouldSearchForImports: {
+      control: 'boolean',
+    },
+  },
+};
+
+export const DefaultStory = (args) => {
+  return <ListItemSearch {...args} />;
+};
+
+DefaultStory.storyName = 'Default';