5 files changed, 19 insertions, 7 deletions

diff --git a/package-lock.json b/package-lock.json
index 13646552b..048425eb6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "franz",
-  "version": "5.2.0-beta.4",
+  "version": "5.2.1-beta.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -2149,9 +2149,9 @@
       }
     },
     "@mdi/js": {
-      "version": "3.4.93",
-      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-3.4.93.tgz",
-      "integrity": "sha512-SEzolEqT8ErlWdHz4AAtQ1lTfAnM6j67Ppm6k5s/I1aIuuoFP/D8d/z838C28xHO1KOqrsS1fw2wlf6fRiEEJA=="
+      "version": "4.2.95",
+      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-4.2.95.tgz",
+      "integrity": "sha512-3qqOZx2HkrQEUc9fr5MiQWlokwmO8TK5bQZ2EP1Rg0q2Q507jy+fUeL8lb9ko2ossYqoPnugIr7jI0/O7uhlrA=="
     },
     "@mdi/react": {
       "version": "1.1.0",
@@ -2178,6 +2178,10 @@
         "react-loader": "^2.4.5"
       },
       "dependencies": {
+        "@mdi/js": {
+          "version": "3.9.97",
+          "bundled": true
+        },
         "@meetfranz/theme": {
           "version": "1.0.14",
           "bundled": true,
@@ -2202,6 +2206,10 @@
         "react-loader": "^2.4.5"
       },
       "dependencies": {
+        "@mdi/js": {
+          "version": "3.9.97",
+          "bundled": true
+        },
         "@meetfranz/theme": {
           "version": "1.0.14",
           "bundled": true,
diff --git a/package.json b/package.json
index f7ae953f4..d30fa08c5 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
   "dependencies": {
     "@babel/polyfill": "7.4.4",
     "@babel/runtime": "7.4.5",
+    "@mdi/js": "4.2.95",
     "@meetfranz/electron-notification-state": "1.0.0",
     "@meetfranz/forms": "file:packages/forms",
     "@meetfranz/theme": "file:packages/theme",
diff --git a/src/components/ui/FeatureItem.js b/src/components/ui/FeatureItem.js
index a63f5f7b5..53616f2eb 100644
--- a/src/components/ui/FeatureItem.js
+++ b/src/components/ui/FeatureItem.js
@@ -2,6 +2,7 @@ import React from 'react';
 import injectSheet from 'react-jss';
 import { Icon } from '@meetfranz/ui';
 import classnames from 'classnames';
+import { mdiCheckCircle } from '@mdi/js';
 
 const styles = theme => ({
   featureItem: {
@@ -27,7 +28,7 @@ export const FeatureItem = injectSheet(styles)(({
     {icon ? (
       <span className={classes.featureIcon}>{icon}</span>
     ) : (
-      <Icon icon="mdiCheckCircle" className={classes.featureIcon} size={1.5} />
+      <Icon icon={mdiCheckCircle} className={classes.featureIcon} size={1.5} />
     )}
     {name}
   </li>
diff --git a/src/components/ui/Modal/index.js b/src/components/ui/Modal/index.js
index 0b7154760..63d858c47 100644
--- a/src/components/ui/Modal/index.js
+++ b/src/components/ui/Modal/index.js
@@ -5,6 +5,7 @@ import classnames from 'classnames';
 import injectCSS from 'react-jss';
 import { Icon } from '@meetfranz/ui';
 
+import { mdiClose } from '@mdi/js';
 import styles from './styles';
 
 // ReactModal.setAppElement('#root');
@@ -59,7 +60,7 @@ export default @injectCSS(styles) class Modal extends Component {
             className={classes.close}
             onClick={close}
           >
-            <Icon icon="mdiClose" size={1.5} />
+            <Icon icon={mdiClose} size={1.5} />
           </button>
         )}
         <div className={classes.content}>
diff --git a/src/features/shareFranz/Component.js b/src/features/shareFranz/Component.js
index 8d1d595c5..859c0ebe9 100644
--- a/src/features/shareFranz/Component.js
+++ b/src/features/shareFranz/Component.js
@@ -6,6 +6,7 @@ import { defineMessages, intlShape } from 'react-intl';
 import { Button } from '@meetfranz/forms';
 import { H1, Icon } from '@meetfranz/ui';
 
+import { mdiHeart } from '@mdi/js';
 import Modal from '../../components/ui/Modal';
 import { state } from '.';
 import { gaEvent } from '../../lib/analytics';
@@ -116,7 +117,7 @@ export default @injectSheet(styles) @inject('stores') @observer class ShareFranz
         close={this.close.bind(this)}
       >
         <div className={classes.heartContainer}>
-          <Icon icon="mdiHeart" className={classes.heart} size={4} />
+          <Icon icon={mdiHeart} className={classes.heart} size={4} />
         </div>
         <H1 className={classes.headline}>
           {intl.formatMessage(messages.headline)}