7 files changed, 26 insertions, 74 deletions

diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx
index 9faedc8f1..b53c2da05 100644
--- a/packages/forms/src/button/index.tsx
+++ b/packages/forms/src/button/index.tsx
@@ -1,4 +1,3 @@
-import * as mdiIcons from '@mdi/js';
 import Icon from '@mdi/react';
 import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
@@ -21,7 +20,7 @@ interface IProps extends IFormField, IWithStyle {
   stretch?: boolean;
   loaded?: boolean;
   busy?: boolean;
-  icon?: keyof typeof mdiIcons;
+  icon?: string;
   href?: string;
   target?: string;
 }
@@ -175,7 +174,7 @@ class ButtonComponent extends Component<IProps> {
       onClick,
       buttonType,
       loaded,
-      icon: iconName,
+      icon,
       busy: busyProp,
       href,
       target,
@@ -185,13 +184,6 @@ class ButtonComponent extends Component<IProps> {
       busy,
     } = this.state;
 
-    let icon = '';
-    if (iconName && mdiIcons[iconName]) {
-      icon = mdiIcons[iconName];
-    } else if (iconName && !mdiIcons[iconName]) {
-      console.warn(`Icon '${iconName}' was not found`);
-    }
-
     let showLoader = false;
     if (loaded) {
       showLoader = !loaded;
diff --git a/packages/ui/src/badge/ProBadge.tsx b/packages/ui/src/badge/ProBadge.tsx
index 612e23210..c18cb4a0c 100644
--- a/packages/ui/src/badge/ProBadge.tsx
+++ b/packages/ui/src/badge/ProBadge.tsx
@@ -1,3 +1,4 @@
+import { mdiStar } from '@mdi/js';
 import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
 import React, { Component } from 'react';
@@ -49,7 +50,7 @@ class ProBadgeComponent extends Component<IProps> {
         ])}
       >
         <Icon
-          icon="mdiStar"
+          icon={mdiStar}
           className={classnames([
             classes.icon,
             inverted && classes.invertedIcon,
diff --git a/packages/ui/src/icon/index.tsx b/packages/ui/src/icon/index.tsx
index e30d3396d..af467c085 100644
--- a/packages/ui/src/icon/index.tsx
+++ b/packages/ui/src/icon/index.tsx
@@ -1,4 +1,3 @@
-import * as mdiIcons from '@mdi/js';
 import MdiIcon from '@mdi/react';
 import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
@@ -8,7 +7,7 @@ import injectStyle from 'react-jss';
 import { IWithStyle } from '../typings/generic';
 
 interface IProps extends IWithStyle {
-  icon: keyof typeof mdiIcons;
+  icon: string;
   size?: number;
   className?: string;
 }
@@ -27,16 +26,13 @@ class IconComponent extends Component<IProps> {
   render() {
     const {
       classes,
-      icon: iconName,
+      icon,
       size,
       className,
     } = this.props;
 
-    let icon = '';
-    if (iconName && mdiIcons[iconName]) {
-      icon = mdiIcons[iconName];
-    } else if (iconName && !mdiIcons[iconName]) {
-      console.warn(`Icon '${iconName}' was not found`);
+    if (!icon) {
+      console.warn('No Icon specified');
     }
 
     return (
diff --git a/packages/ui/src/infobox/index.tsx b/packages/ui/src/infobox/index.tsx
index 9066a623e..5070ee7ef 100644
--- a/packages/ui/src/infobox/index.tsx
+++ b/packages/ui/src/infobox/index.tsx
@@ -1,3 +1,4 @@
+import { mdiClose } from '@mdi/js';
 import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
 import React, { Component } from 'react';
@@ -192,7 +193,7 @@ class InfoboxComponent extends Component<IProps, IState> {
               onClick={this.dismiss.bind(this)}
               className={classes.close}
             >
-              <Icon icon="mdiClose" />
+              <Icon icon={mdiClose} />
             </button>
           )}
         </div>
diff --git a/uidev/src/stories/button.stories.tsx b/uidev/src/stories/button.stories.tsx
index f7537895c..5c1c9246d 100644
--- a/uidev/src/stories/button.stories.tsx
+++ b/uidev/src/stories/button.stories.tsx
@@ -1,10 +1,10 @@
+import { mdiInformation } from '@mdi/js';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import React from 'react';
 import injectSheet from 'react-jss';
 
 import { Button, Input } from '@meetfranz/forms';
-import { classes } from 'istanbul-lib-coverage';
 import { Classes } from 'jss';
 import { storiesOf } from '../stores/stories';
 
@@ -92,7 +92,7 @@ storiesOf('Button')
   ))
   .add('With icon', () => (
     <WithStoreButton store={createStore({
-      icon: 'mdiInformation',
+      icon: mdiInformation,
     })} />
   ))
   .add('As link', () => (
@@ -131,7 +131,7 @@ storiesOf('Button')
       <div className={classes.combinedElements}>
         <Input showLabel={false} className={classes.input} noMargin />
         <WithStoreButton store={createStore({
-          icon: 'mdiInformation',
+          icon: mdiInformation,
         })} />
       </div>
     )),
diff --git a/uidev/src/stories/icon.stories.tsx b/uidev/src/stories/icon.stories.tsx
index c8e7f8ced..f9aa1635b 100644
--- a/uidev/src/stories/icon.stories.tsx
+++ b/uidev/src/stories/icon.stories.tsx
@@ -1,53 +1,14 @@
-import { observable } from 'mobx';
-import { observer } from 'mobx-react';
+import { mdiAccountCircle } from '@mdi/js';
 import React from 'react';
-import uuid from 'uuid/v4';
 
 import { Icon } from '@meetfranz/ui';
 import { storiesOf } from '../stores/stories';
 
-// interface IStoreArgs {
-//   value?: boolean;
-//   checked?: boolean;
-//   label?: string;
-//   id?: string;
-//   name?: string;
-//   disabled?: boolean;
-//   error?: string;
-// }
-
-// const createStore = (args?: IStoreArgs) => {
-//   return observable(Object.assign({
-//     id: `element-${uuid()}`,
-//     name: 'toggle',
-//     label: 'Label',
-//     value: true,
-//     checked: false,
-//     disabled: false,
-//     error: '',
-//   },                              args));
-// };
-
-// const WithStoreToggle = observer(({ store }: { store: any }) => (
-//   <>
-//     <Toggle
-//       value={store.value}
-//       checked={store.checked}
-//       label={store.label}
-//       id={store.id}
-//       name={store.name}
-//       disabled={store.disabled}
-//       error={store.error}
-//       onChange={() => store.checked = !store.checked}
-//     />
-//   </>
-// ));
-
 storiesOf('Icon')
   .add('Basic', () => (
     <>
-      <Icon icon="mdiAccountCircle" />
-      <Icon icon="mdiAccountCircle" size={2} />
-      <Icon icon="mdiAccountCircle" size={3} />
+      <Icon icon={mdiAccountCircle} />
+      <Icon icon={mdiAccountCircle} size={2} />
+      <Icon icon={mdiAccountCircle} size={3} />
     </>
   ));
diff --git a/uidev/src/stories/infobox.stories.tsx b/uidev/src/stories/infobox.stories.tsx
index 144855376..c3442da0d 100644
--- a/uidev/src/stories/infobox.stories.tsx
+++ b/uidev/src/stories/infobox.stories.tsx
@@ -1,3 +1,4 @@
+import { mdiEarth } from '@mdi/js';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import React from 'react';
@@ -44,7 +45,7 @@ storiesOf('Infobox')
   .add('Icon + Dismissable', () => (
     <WithStoreInfobox
       store={createStore({
-        icon: 'mdiEarth',
+        icon: mdiEarth,
         dismissable: true,
       })}
     >
@@ -54,7 +55,7 @@ storiesOf('Infobox')
   .add('With CTA', () => (
     <WithStoreInfobox
       store={createStore({
-        icon: 'mdiEarth',
+        icon: mdiEarth,
         ctaLabel: 'Ok, hi!',
       })}
     >
@@ -64,7 +65,7 @@ storiesOf('Infobox')
   .add('With long text', () => (
     <WithStoreInfobox
       store={createStore({
-        icon: 'mdiEarth',
+        icon: mdiEarth,
         ctaLabel: 'Ok, hi!',
       })}
     >
@@ -74,7 +75,7 @@ storiesOf('Infobox')
   .add('Secondary', () => (
     <WithStoreInfobox
       store={createStore({
-        icon: 'mdiEarth',
+        icon: mdiEarth,
         ctaLabel: 'Ok, hi!',
         type: 'secondary',
       })}
@@ -85,7 +86,7 @@ storiesOf('Infobox')
   .add('Success', () => (
     <WithStoreInfobox
       store={createStore({
-        icon: 'mdiEarth',
+        icon: mdiEarth,
         ctaLabel: 'Ok, hi!',
         type: 'success',
       })}
@@ -96,7 +97,7 @@ storiesOf('Infobox')
   .add('Warning', () => (
     <WithStoreInfobox
       store={createStore({
-        icon: 'mdiEarth',
+        icon: mdiEarth,
         ctaLabel: 'Ok, hi!',
         type: 'warning',
       })}
@@ -107,7 +108,7 @@ storiesOf('Infobox')
   .add('Danger', () => (
     <WithStoreInfobox
       store={createStore({
-        icon: 'mdiEarth',
+        icon: mdiEarth,
         ctaLabel: 'Ok, hi!',
         type: 'danger',
       })}
@@ -118,7 +119,7 @@ storiesOf('Infobox')
   .add('Inverted', () => (
     <WithStoreInfobox
       store={createStore({
-        icon: 'mdiEarth',
+        icon: mdiEarth,
         ctaLabel: 'Ok, hi!',
         type: 'inverted',
       })}