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

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

2 files changed, 14 insertions, 10 deletions

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,
               )}