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

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

19 files changed, 111 insertions, 67 deletions

diff --git a/src/components/AppUpdateInfoBar.tsx b/src/components/AppUpdateInfoBar.tsx
index 1dd3723cc..d2402945e 100644
--- a/src/components/AppUpdateInfoBar.tsx
+++ b/src/components/AppUpdateInfoBar.tsx
@@ -1,8 +1,10 @@
 import { defineMessages, useIntl } from 'react-intl';
 
+import { mdiInformation } from '@mdi/js';
 import InfoBar from './ui/InfoBar';
 import { GITHUB_FERDI_URL } from '../config';
 import { openExternalUrl } from '../helpers/url-helpers';
+import { Icon } from './ui/icon';
 
 const messages = defineMessages({
   updateAvailable: {
@@ -34,7 +36,7 @@ const AppUpdateInfoBar = ({ onInstallUpdate, onHide }: Props) => {
       onClick={onInstallUpdate}
       onHide={onHide}
     >
-      <span className="mdi mdi-information" />
+      <Icon icon={mdiInformation} />
       {intl.formatMessage(messages.updateAvailable)}{' '}
       <button
         className="info-bar__inline-button"
diff --git a/src/components/auth/AuthLayout.js b/src/components/auth/AuthLayout.js
index 047b10775..f26282cfc 100644
--- a/src/components/auth/AuthLayout.js
+++ b/src/components/auth/AuthLayout.js
@@ -4,6 +4,7 @@ import { observer } from 'mobx-react';
 import { TitleBar } from 'electron-react-titlebar/renderer';
 
 import { injectIntl } from 'react-intl';
+import { mdiFlash } from '@mdi/js';
 import Link from '../ui/Link';
 import InfoBar from '../ui/InfoBar';
 
@@ -16,6 +17,7 @@ import globalMessages from '../../i18n/globalMessages';
 import { isWindows } from '../../environment';
 import AppUpdateInfoBar from '../AppUpdateInfoBar';
 import { GITHUB_FERDI_URL } from '../../config';
+import { Icon } from '../ui/icon';
 
 @observer
 class AuthLayout extends Component {
@@ -61,7 +63,7 @@ class AuthLayout extends Component {
         <div className="auth">
           {!isOnline && (
             <InfoBar type="warning">
-              <span className="mdi mdi-flash" />
+              <Icon icon={mdiFlash} />
               {intl.formatMessage(globalMessages.notConnectedToTheInternet)}
             </InfoBar>
           )}
@@ -81,7 +83,7 @@ class AuthLayout extends Component {
               sticky
               onClick={retryHealthCheck}
             >
-              <span className="mdi mdi-flash" />
+              <Icon icon={mdiFlash} />
               {intl.formatMessage(globalMessages.APIUnhealthy)}
             </InfoBar>
           )}
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index af27e8854..a31419a5e 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -6,6 +6,7 @@ import { TitleBar } from 'electron-react-titlebar/renderer';
 import injectSheet from 'react-jss';
 import { ipcRenderer } from 'electron';
 
+import { mdiFlash, mdiPowerPlug } from '@mdi/js';
 import InfoBar from '../ui/InfoBar';
 import { Component as BasicAuth } from '../../features/basicAuth';
 import { Component as QuickSwitch } from '../../features/quickSwitch';
@@ -20,6 +21,7 @@ import WorkspaceSwitchingIndicator from '../../features/workspaces/components/Wo
 import { workspaceStore } from '../../features/workspaces';
 import AppUpdateInfoBar from '../AppUpdateInfoBar';
 import Todos from '../../features/todos/containers/TodosScreen';
+import { Icon } from '../ui/icon';
 
 const messages = defineMessages({
   servicesUpdated: {
@@ -151,7 +153,7 @@ class AppLayout extends Component {
                   sticky
                   onClick={retryRequiredRequests}
                 >
-                  <span className="mdi mdi-flash" />
+                  <Icon icon={mdiFlash} />
                   {intl.formatMessage(messages.requiredRequestsFailed)}
                 </InfoBar>
               )}
@@ -163,7 +165,7 @@ class AppLayout extends Component {
                   sticky
                   onClick={retryRequiredRequests}
                 >
-                  <span className="mdi mdi-flash" />
+                  <Icon icon={mdiFlash} />
                   {intl.formatMessage(messages.authRequestFailed)}
                 </InfoBar>
               )}
@@ -179,7 +181,7 @@ class AppLayout extends Component {
                       });
                     }}
                   >
-                    <span className="mdi mdi-power-plug" />
+                    <Icon icon={mdiPowerPlug} />
                     {intl.formatMessage(messages.servicesUpdated)}
                   </InfoBar>
                 )}
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index 18492be80..728613f42 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -4,6 +4,16 @@ import ReactTooltip from 'react-tooltip';
 import { defineMessages, injectIntl } from 'react-intl';
 import { inject, observer } from 'mobx-react';
 import { Link } from 'react-router';
+import {
+  mdiCheckAll,
+  mdiViewGrid,
+  mdiPlusBox,
+  mdiLoginVariant,
+  mdiCog,
+  mdiBellOff,
+  mdiBell,
+  mdiLock,
+} from '@mdi/js';
 
 import Tabbar from '../services/tabs/Tabbar';
 import {
@@ -19,6 +29,7 @@ import { todoActions } from '../../features/todos/actions';
 import AppStore from '../../stores/AppStore';
 import SettingsStore from '../../stores/SettingsStore';
 import globalMessages from '../../i18n/globalMessages';
+import { Icon } from '../ui/icon';
 
 const messages = defineMessages({
   addNewService: {
@@ -156,7 +167,7 @@ class Sidebar extends Component {
                   messages.lockFerdi,
                 )} (${lockFerdiShortcutKey(false)})`}
               >
-                <i className="mdi mdi-lock" />
+                <Icon icon={mdiLock} size={1.5} />
               </button>
             ) : null}
             {todosStore.isFeatureEnabledByUser ? (
@@ -174,7 +185,7 @@ class Sidebar extends Component {
                   todosToggleMessage,
                 )} (${todosToggleShortcutKey(false)})`}
               >
-                <i className="mdi mdi-check-all" />
+                <Icon icon={mdiCheckAll} size={1.5} />
               </button>
             ) : null}
             <button
@@ -190,7 +201,7 @@ class Sidebar extends Component {
                 workspaceToggleMessage,
               )} (${workspaceToggleShortcutKey(false)})`}
             >
-              <i className="mdi mdi-view-grid" />
+              <Icon icon={mdiViewGrid} size={1.5} />
             </button>
             <button
               type="button"
@@ -205,7 +216,7 @@ class Sidebar extends Component {
                 isAppMuted ? messages.unmute : messages.mute,
               )} (${muteFerdiShortcutKey(false)})`}
             >
-              <i className={`mdi mdi-bell${isAppMuted ? '-off' : ''}`} />
+              <Icon icon={isAppMuted ? mdiBellOff : mdiBell} size={1.5} />
             </button>
             <button
               type="button"
@@ -215,7 +226,7 @@ class Sidebar extends Component {
                 messages.addNewService,
               )} (${addNewServiceShortcutKey(false)})`}
             >
-              <i className="mdi mdi-plus-box" />
+              <Icon icon={mdiPlusBox} size={1.5} />
             </button>
           </>
         ) : (
@@ -224,7 +235,7 @@ class Sidebar extends Component {
             className="sidebar__button sidebar__button--new-service"
             data-tip="Login"
           >
-            <i className="mdi mdi-login-variant" />
+            <Icon icon={mdiLoginVariant} size={1.5} />
           </Link>
         )}
         <button
@@ -235,7 +246,7 @@ class Sidebar extends Component {
             globalMessages.settings,
           )} (${settingsShortcutKey(false)})`}
         >
-          <i className="mdi mdi-cog" />
+          <Icon icon={mdiCog} size={1.5} />
           {(this.props.stores.app.updateStatus ===
             this.props.stores.app.updateStatusTypes.AVAILABLE ||
             this.props.stores.app.updateStatus ===
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index 3ea6c5da2..a07652284 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -9,10 +9,12 @@ import injectSheet from 'react-jss';
 import ms from 'ms';
 
 import { observable, autorun, reaction } from 'mobx';
+import { mdiExclamation } from '@mdi/js';
 import ServiceModel from '../../../models/Service';
 import { cmdOrCtrlShortcutKey } from '../../../environment';
 import globalMessages from '../../../i18n/globalMessages';
 import SettingsStore from '../../../stores/SettingsStore';
+import { Icon } from '../../ui/icon';
 
 const IS_SERVICE_DEBUGGING_ENABLED = (
   localStorage.getItem('debug') || ''
@@ -334,10 +336,10 @@ class TabItem extends Component {
     }
 
     let errorBadge = null;
-    if ( service.isError ) {
-      errorBadge=(
-        <i className = " mdi mdi-exclamation tab-item__error-icon"/>
-      )
+    if (service.isError) {
+      errorBadge = (
+        <Icon icon={mdiExclamation} className="tab-item__error-icon" />
+      );
     }
 
     return (
@@ -359,11 +361,14 @@ class TabItem extends Component {
             : ''
         }`}
       >
-
-        {showServiceNameSetting? <div>
+        {showServiceNameSetting ? (
+          <div>
+            <img src={service.icon} className="tab-item__icon" alt="" />
+            <span className="tab-item__label">{service.name}</span>
+          </div>
+        ) : (
           <img src={service.icon} className="tab-item__icon" alt="" />
-          <span className="tab-item__label">{service.name}</span>
-        </div> : <img src={service.icon} className="tab-item__icon" alt="" />}
+        )}
 
         {notificationBadge}
         {errorBadge}
diff --git a/src/components/settings/SettingsLayout.js b/src/components/settings/SettingsLayout.js
index be11fdb8e..e9119a944 100644
--- a/src/components/settings/SettingsLayout.js
+++ b/src/components/settings/SettingsLayout.js
@@ -3,9 +3,11 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
 
+import { mdiClose } from '@mdi/js';
 import ErrorBoundary from '../util/ErrorBoundary';
 import { oneOrManyChildElements } from '../../prop-types';
 import Appear from '../ui/effects/Appear';
+import { Icon } from '../ui/icon';
 
 const messages = defineMessages({
   closeSettings: {
@@ -62,10 +64,12 @@ class SettingsLayout extends Component {
               {children}
               <button
                 type="button"
-                className="settings__close mdi mdi-close"
+                className="settings__close"
                 onClick={closeSettings}
                 aria-label={intl.formatMessage(messages.closeSettings)}
-              />
+              >
+                <Icon icon={mdiClose} size={1.35} />
+              </button>
             </div>
           </ErrorBoundary>
         </div>
diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.js
index bdb6f3ca0..dcf7a4784 100644
--- a/src/components/settings/recipes/RecipesDashboard.js
+++ b/src/components/settings/recipes/RecipesDashboard.js
@@ -6,6 +6,7 @@ import { Link } from 'react-router';
 
 import injectSheet from 'react-jss';
 
+import { mdiOpenInNew } from '@mdi/js';
 import { Button } from '../../ui/button/index';
 import { Input } from '../../ui/input/index';
 import { H3, H2 } from '../../ui/headline';
@@ -16,6 +17,7 @@ import Loader from '../../ui/Loader';
 import Appear from '../../ui/effects/Appear';
 import { FRANZ_SERVICE_REQUEST } from '../../../config';
 import RecipePreview from '../../../models/RecipePreview';
+import { Icon } from '../../ui/icon';
 
 const messages = defineMessages({
   headline: {
@@ -197,7 +199,7 @@ class RecipesDashboard extends Component {
               rel="noreferrer"
             >
               {intl.formatMessage(messages.missingService)}{' '}
-              <i className="mdi mdi-open-in-new" />
+              <Icon icon={mdiOpenInNew} />
             </a>
           </div>
           {/* )} */}
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index b040e6cc2..2c451d7bf 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -5,6 +5,7 @@ import { Link } from 'react-router';
 import { defineMessages, injectIntl } from 'react-intl';
 import normalizeUrl from 'normalize-url';
 
+import { mdiInformation } from '@mdi/js';
 import Form from '../../../lib/Form';
 import Recipe from '../../../models/Recipe';
 import Service from '../../../models/Service';
@@ -19,6 +20,7 @@ import Select from '../../ui/Select';
 
 import { isMac } from '../../../environment';
 import globalMessages from '../../../i18n/globalMessages';
+import { Icon } from '../../ui/icon';
 
 const messages = defineMessages({
   saveService: {
@@ -315,7 +317,7 @@ class EditServiceForm extends Component {
                   marginTop: 0,
                 }}
               >
-                <span className="mdi mdi-information" />
+                <Icon icon={mdiInformation} />
                 {recipe.message}
               </p>
             )}
@@ -415,11 +417,11 @@ class EditServiceForm extends Component {
                       </div>
                     </div>
                     <p>
-                      <span className="mdi mdi-information" />
+                      <Icon icon={mdiInformation} />
                       {intl.formatMessage(messages.proxyRestartInfo)}
                     </p>
                     <p>
-                      <span className="mdi mdi-information" />
+                      <Icon icon={mdiInformation} />
                       {intl.formatMessage(messages.proxyInfo)}
                     </p>
                   </>
@@ -458,7 +460,7 @@ class EditServiceForm extends Component {
                 />
               </div>
               <p style={{ marginTop: 10, marginBottom: 10 }}>
-                <span className="mdi mdi-information" />
+                <Icon icon={mdiInformation} />
                 {intl.formatMessage(messages.recipeFileInfo)}
               </p>
             </>
diff --git a/src/components/settings/services/ServiceItem.js b/src/components/settings/services/ServiceItem.js
index e08b9af1f..d83e5fd56 100644
--- a/src/components/settings/services/ServiceItem.js
+++ b/src/components/settings/services/ServiceItem.js
@@ -5,7 +5,9 @@ import ReactTooltip from 'react-tooltip';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 
+import { mdiBellOff, mdiMessageBulletedOff, mdiPower } from '@mdi/js';
 import ServiceModel from '../../../models/Service';
+import { Icon } from '../../ui/icon';
 
 const messages = defineMessages({
   tooltipIsDisabled: {
@@ -59,24 +61,24 @@ class ServiceItem extends Component {
         </td>
         <td className="service-table__column-info" onClick={goToServiceForm}>
           {service.isMuted && (
-            <span
-              className="mdi mdi-bell-off"
+            <Icon
+              icon={mdiBellOff}
               data-tip={intl.formatMessage(messages.tooltipIsMuted)}
             />
           )}
         </td>
         <td className="service-table__column-info" onClick={goToServiceForm}>
           {!service.isEnabled && (
-            <span
-              className="mdi mdi-power"
+            <Icon
+              icon={mdiPower}
               data-tip={intl.formatMessage(messages.tooltipIsDisabled)}
             />
           )}
         </td>
         <td className="service-table__column-info" onClick={goToServiceForm}>
           {!service.isNotificationEnabled && (
-            <span
-              className="mdi mdi-message-bulleted-off"
+            <Icon
+              icon={mdiMessageBulletedOff}
               data-tip={intl.formatMessage(
                 messages.tooltipNotificationsDisabled,
               )}
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 54f2025e5..7e86ea79a 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -5,6 +5,7 @@ import { observer } from 'mobx-react';
 import prettyBytes from 'pretty-bytes';
 import { defineMessages, injectIntl } from 'react-intl';
 
+import { mdiGithub, mdiInformation, mdiOpenInNew } from '@mdi/js';
 import Form from '../../../lib/Form';
 import Button from '../../ui/Button';
 import Toggle from '../../ui/Toggle';
@@ -25,6 +26,7 @@ import {
 } from '../../../environment-remote';
 import { openPath } from '../../../helpers/url-helpers';
 import globalMessages from '../../../i18n/globalMessages';
+import { Icon } from '../../ui/icon';
 
 const debug = require('debug')('Ferdi:EditSettingsForm');
 
@@ -664,7 +666,7 @@ class EditSettingsForm extends Component {
                   rel="noreferrer"
                 >
                   {intl.formatMessage(messages.translationHelp)}{' '}
-                  <i className="mdi mdi-open-in-new" />
+                  <Icon icon={mdiOpenInNew} />
                 </a>
               </div>
             )}
@@ -797,7 +799,7 @@ class EditSettingsForm extends Component {
                   </>
                 )}
                 <p className="settings__message">
-                  <span className="mdi mdi-github-face" />
+                  <Icon icon={mdiGithub} />
                   <span>
                     Ferdi is based on{' '}
                     <a
@@ -817,7 +819,7 @@ class EditSettingsForm extends Component {
                     </a>
                   </span>
                   <br />
-                  <span className="mdi mdi-information" />
+                  <Icon icon={mdiInformation} />
                   {intl.formatMessage(messages.languageDisclaimer)}
                 </p>
               </div>
diff --git a/src/components/settings/supportFerdi/SupportFerdiDashboard.tsx b/src/components/settings/supportFerdi/SupportFerdiDashboard.tsx
index 505c49812..88e936b71 100644
--- a/src/components/settings/supportFerdi/SupportFerdiDashboard.tsx
+++ b/src/components/settings/supportFerdi/SupportFerdiDashboard.tsx
@@ -1,6 +1,8 @@
 import { defineMessages, useIntl } from 'react-intl';
 import { BrowserWindow } from '@electron/remote';
+import { mdiOpenInNew } from '@mdi/js';
 import InfoBar from '../../ui/InfoBar';
+import { Icon } from '../../ui/icon';
 
 const messages = defineMessages({
   headline: {
@@ -159,7 +161,7 @@ const SupportFerdiDashboard = () => {
             >
               {' '}
               {intl.formatMessage(messages.textListContributorsHere)}
-              <i className="mdi mdi-open-in-new" />
+              <Icon icon={mdiOpenInNew} />
             </a>
             <br />
             <br />
@@ -175,7 +177,7 @@ const SupportFerdiDashboard = () => {
             >
               {' '}
               {intl.formatMessage(messages.textSupportWelcomeHere)}
-              <i className="mdi mdi-open-in-new" />
+              <Icon icon={mdiOpenInNew} />
             </a>
           </p>
           <p>
@@ -188,7 +190,7 @@ const SupportFerdiDashboard = () => {
             >
               {' '}
               {intl.formatMessage(messages.textOpenCollective)}
-              <i className="mdi mdi-open-in-new" />
+              <Icon icon={mdiOpenInNew} />
             </a>
           </p>
           <p>
@@ -201,7 +203,7 @@ const SupportFerdiDashboard = () => {
             >
               {' '}
               {intl.formatMessage(messages.textOpenCollective)}
-              <i className="mdi mdi-open-in-new" />
+              <Icon icon={mdiOpenInNew} />
             </a>{' '}
             {intl.formatMessage(messages.textDonationAnd)}
             <a
@@ -212,7 +214,7 @@ const SupportFerdiDashboard = () => {
             >
               {' '}
               {intl.formatMessage(messages.textGitHubSponsors)}
-              <i className="mdi mdi-open-in-new" />
+              <Icon icon={mdiOpenInNew} />
             </a>
           </p>
         </div>
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>
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
index 590efacd0..d66e0f10d 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.js
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -164,7 +164,6 @@ class WorkspaceDrawer extends Component {
           >
             <Icon
               icon={mdiPlusBox}
-              size={1}
               className={classes.workspacesSettingsButtonIcon}
             />
             <span>{intl.formatMessage(messages.addNewWorkspaceLabel)}</span>
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index 6e0d98ffb..d41536f31 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -4,8 +4,6 @@ import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import injectSheet from 'react-jss';
 
-import { mdiCheckboxMarkedCircleOutline } from '@mdi/js';
-
 import { Infobox } from '../../../components/ui/infobox/index';
 import Loader from '../../../components/ui/Loader';
 import WorkspaceItem from './WorkspaceItem';
@@ -110,7 +108,7 @@ class WorkspacesDashboard extends Component {
             <Appear className={classes.appear}>
               <Infobox
                 type="success"
-                icon={mdiCheckboxMarkedCircleOutline}
+                icon="checkbox-marked-circle-outline"
                 dismissable
                 onUnmount={updateWorkspaceRequest.reset}
               >
@@ -124,7 +122,7 @@ class WorkspacesDashboard extends Component {
             <Appear className={classes.appear}>
               <Infobox
                 type="success"
-                icon={mdiCheckboxMarkedCircleOutline}
+                icon="checkbox-marked-circle-outline"
                 dismissable
                 onUnmount={deleteWorkspaceRequest.reset}
               >
diff --git a/src/styles/main.scss b/src/styles/main.scss
index b0815e086..bd1226b31 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,10 +1,4 @@
-$mdi-font-path: '../node_modules/@mdi/font/fonts';
-@if $env == development {
-  $mdi-font-path: '../../node_modules/@mdi/font/fonts';
-}
-
-@import './node_modules/@mdi/font/scss/materialdesignicons.scss';
-@import './node_modules/electron-react-titlebar/assets/style';
+@import '~electron-react-titlebar/assets/style.css';
 
 // modules
 @import './reset.scss';