Include MaterialIcons to Icon component

recipes/src/components/Button/index.tsx

@@ -1,11 +1,10 @@
 import React, { ReactElement } from 'react';
 import Button from '@material/react-button';
+import Icon from 'components/Icon';
 import IconButton from '@material/react-icon-button';
-import MaterialIcon from '@material/react-material-icon';
 
 import '@material/react-button/dist/button.css';
 import '@material/react-icon-button/dist/icon-button.css'
-import '@material/react-material-icon/dist/material-icon.css';
 
 type CBKButtonProps = {
   children: string|ReactElement,
@@ -21,7 +20,7 @@ export default function CBKButton(props: any) {
   if (props.icon) {
     return (
       <IconButton onClick={props.onClick} {...props}>
-        <MaterialIcon icon={props.icon}/>
+        <Icon material icon={props.icon}/>
       </IconButton>
     );
   } else {

recipes/src/components/Icon/index.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import Svgs from 'svgs';
 import ReactSVG from 'react-svg';
+import MaterialIcon from '@material/react-material-icon';
+
+import '@material/react-material-icon/dist/material-icon.css';
 
 export type IconProps = {
   icon: string,
@@ -8,21 +11,24 @@ export type IconProps = {
   fill?: string,
   width?: number,
   height?: number,
+  material?: boolean,
 }
 
-export function Icon(props: IconProps) {
+export function Icon({ width, height, fill, icon, className, material }: IconProps) {
   const styles = {
-    width: props.width || 64,
-    height: props.height || 'auto',
-    fill: props.fill,
+    width: width || 64,
+    height: height || 'auto',
+    fill: fill,
   };
 
-  return (
+  return material ? (
+    <MaterialIcon icon={icon} />
+  ) : (
     <ReactSVG
       // @ts-ignore
-      src={Svgs[props.icon]}
+      src={Svgs[icon]}
       className='cbk-icon'
-      svgClassName={props.className}
+      svgClassName={className}
       svgStyle={styles}
     />
   )