chore: remove @mdi/font in favor of using icons with @mdi/js directly (#2158)

Co-authored-by: Vijay A <vraravam@users.noreply.github.com>

1 files changed, 7 insertions, 5 deletions

diff --git a/src/components/ui/SearchInput.tsx b/src/components/ui/SearchInput.tsx
index af55b0e11..49a50a4a0 100644
--- a/src/components/ui/SearchInput.tsx
+++ b/src/components/ui/SearchInput.tsx
@@ -2,6 +2,8 @@ import { ChangeEvent, Component } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import { debounce } from 'lodash';
+import { mdiCloseCircleOutline, mdiMagnify } from '@mdi/js';
+import { Icon } from './icon';
 
 type Props = {
   value: string;
@@ -88,7 +90,8 @@ class SearchInput extends Component<Props> {
 
     return (
       <div className={classnames([className, 'search-input'])}>
-        <label htmlFor={name} className="mdi mdi-magnify">
+        <label htmlFor={name}>
+          <Icon icon={mdiMagnify} />
           <input
             name={name}
             id={name}
@@ -103,10 +106,9 @@ class SearchInput extends Component<Props> {
           />
         </label>
         {value.length > 0 && (
-          <span
-            className="mdi mdi-close-circle-outline"
-            onClick={() => this.reset()}
-          />
+          <span onClick={() => this.reset()}>
+            <Icon icon={mdiCloseCircleOutline} />
+          </span>
         )}
       </div>
     );