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

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

6 files changed, 35 insertions, 21 deletions

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>