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

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

5 files changed, 30 insertions, 13 deletions

diff --git a/src/components/ui/ImageUpload.tsx b/src/components/ui/ImageUpload.tsx
index 4b25be502..118e6b206 100644
--- a/src/components/ui/ImageUpload.tsx
+++ b/src/components/ui/ImageUpload.tsx
@@ -3,7 +3,9 @@ import { observer } from 'mobx-react';
 import { Field } from 'mobx-react-form';
 import classnames from 'classnames';
 import Dropzone, { DropzoneRef } from 'react-dropzone';
+import { mdiDelete, mdiFileImage } from '@mdi/js';
 import { isWindows } from '../../environment';
+import { Icon } from './icon';
 
 type Props = {
   field: typeof Field;
@@ -75,7 +77,7 @@ class ImageUpload extends Component<Props> {
                     }
                   }}
                 >
-                  <i className="mdi mdi-delete" />
+                  <Icon icon={mdiDelete} />
                   <p>{textDelete}</p>
                 </button>
                 <div className="image-upload__action-background" />
@@ -92,7 +94,7 @@ class ImageUpload extends Component<Props> {
             >
               {({ getRootProps, getInputProps }) => (
                 <div {...getRootProps()} className={cssClasses}>
-                  <i className="mdi mdi-file-image" />
+                  <Icon icon={mdiFileImage} />
                   <p>{textUpload}</p>
                   <input {...getInputProps()} />
                 </div>
diff --git a/src/components/ui/InfoBar.js b/src/components/ui/InfoBar.js
index 3311a949f..89b085907 100644
--- a/src/components/ui/InfoBar.js
+++ b/src/components/ui/InfoBar.js
@@ -5,7 +5,9 @@ import classnames from 'classnames';
 import Loader from 'react-loader';
 import { defineMessages, injectIntl } from 'react-intl';
 
+import { mdiClose } from '@mdi/js';
 import Appear from './effects/Appear';
+import { Icon } from './icon';
 
 const messages = defineMessages({
   hide: {
@@ -88,10 +90,12 @@ class InfoBar extends Component {
         {!sticky && (
           <button
             type="button"
-            className="info-bar__close mdi mdi-close"
+            className="info-bar__close"
             onClick={onHide}
             aria-label={intl.formatMessage(messages.hide)}
-          />
+          >
+            <Icon icon={mdiClose} />
+          </button>
         )}
       </Appear>
     );
diff --git a/src/components/ui/Infobox.js b/src/components/ui/Infobox.js
index b88b01bd8..c0ba8f13c 100644
--- a/src/components/ui/Infobox.js
+++ b/src/components/ui/Infobox.js
@@ -4,6 +4,13 @@ import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import Loader from 'react-loader';
 import { defineMessages, injectIntl } from 'react-intl';
+import { mdiAlert, mdiCheckboxMarkedCircleOutline, mdiClose } from '@mdi/js';
+import { Icon } from '../ui/icon';
+
+const icons = {
+  'checkbox-marked-circle-outline': mdiCheckboxMarkedCircleOutline,
+  alert: mdiAlert,
+};
 
 const messages = defineMessages({
   dismiss: {
@@ -73,7 +80,7 @@ class Infobox extends Component {
           'infobox--default': !type,
         })}
       >
-        {icon && <i className={`mdi mdi-${icon}`} />}
+        {icon && <Icon icon={icons[icon]} />}
         <div className="infobox__content">{children}</div>
         {ctaLabel && (
           <button className="infobox__cta" onClick={ctaOnClick} type="button">
@@ -94,9 +101,11 @@ class Infobox extends Component {
               this.setState({ dismissed: true });
               if (onDismiss) onDismiss();
             }}
-            className="infobox__delete mdi mdi-close"
+            className="infobox__delete"
             aria-label={intl.formatMessage(messages.dismiss)}
-          />
+          >
+            <Icon icon={mdiClose} />
+          </button>
         )}
       </div>
     );
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>
     );
diff --git a/src/components/ui/input/index.tsx b/src/components/ui/input/index.tsx
index 0b16fe688..c46cafc5c 100644
--- a/src/components/ui/input/index.tsx
+++ b/src/components/ui/input/index.tsx
@@ -178,7 +178,7 @@ class InputComponent extends Component<IProps, IState> {
                 }
                 tabIndex={-1}
               >
-                <Icon path={!showPassword ? mdiEye : mdiEyeOff} size={1} />
+                <Icon path={!showPassword ? mdiEye : mdiEyeOff} />
               </button>
             )}
           </div>