2 files changed, 23 insertions, 10 deletions

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 ===