Added buttons

Author: Kameshwaran

src/button/Button.js

@@ -13,8 +13,14 @@ const factory = (ripple, FontIcon) => {
       size: 'medium',
       className: '',
       href: '',
+      iconAlignment: 'left',
     };
 
+    getIcon = (icon, iconAlignment, theme) => {
+      const iconClasses = classnames(theme.icon, theme[`icon-${iconAlignment}`]);
+      return <FontIcon className={iconClasses} value={icon} />;
+    }
+
     handleMouseUp = (event) => {
       this.buttonNode.blur();
       if (this.props.onMouseUp) this.props.onMouseUp(event);
@@ -26,13 +32,12 @@ const factory = (ripple, FontIcon) => {
     };
 
     render() {
-      const { children, type, size, className, href, icon, theme, ...others } = this.props;
+      const {
+        children, type, size, className, href, icon, iconAlignment, theme, ...others
+      } = this.props;
       const element = href ? 'a' : 'button';
 
-      const classes = classnames(theme.button, {
-        [theme[type]]: true,
-        [theme[size]]: true,
-      }, className);
+      const classes = classnames(theme.button, theme[type], theme[size], className);
 
       const props = {
         ...others,
@@ -45,7 +50,7 @@ const factory = (ripple, FontIcon) => {
       };
 
       return React.createElement(element, props,
-        icon ? <FontIcon className={theme.icon} value={icon} /> : null,
+        icon ? this.getIcon(icon, iconAlignment, theme) : null,
         children,
       );
     }

src/button/theme.scss

@@ -42,8 +42,16 @@
 
   & .icon {
     font-size: 120%;
+  }
+
+  & .icon-left {
+    float: left;
     margin-right: 6px;
-    vertical-align: middle;
+  }
+
+  & .icon-right {
+    margin-left: 6px;
+    float: right;
   }
 
   & > input {

src/font_icon/FontIcon.js

@@ -1,18 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 
-const FontIcon = ({ alt, children, className, theme, value, ...other}) => ( // eslint-disable-line
-  <span
-    data-react-toolbox="font-icon"
-    aria-label={alt}
-    className={classnames({ 'material-icons': typeof value === 'string' || typeof children === 'string' }, className)}
-    {...other}
-  >
-    {value}
-    {children}
-  </span>
-);
+import iconTheme from './theme.scss';
+
+const FontIcon = ({ alt, children, className, theme, value, ...other}) => { // eslint-disable-line
+  const _classNames = classnames({
+    [iconTheme.materialIcons]: typeof value === 'string' || typeof children === 'string',
+  }, className);
+
+  return (
+    <span
+      aria-label={alt}
+      className={_classNames}
+      {...other}
+    >
+      {value}
+      {children}
+    </span>
+  );
+};
 
 FontIcon.propTypes = {
   alt: PropTypes.string,

src/font_icon/theme.scss

@@ -0,0 +1,22 @@
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/materialicons/v38/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
+}
+
+.materialIcons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}

src/index.js

@@ -17,10 +17,14 @@ const Index = () => (
     </Card>
 
     <div style={{ margin: '20px' }}>
-      <Button size="medium">Hello</Button>
+      <Button size="medium" icon="favorite">Hello</Button>
+      <Button type="danger" size="medium" icon="bookmark" iconAlignment="right">Hello</Button>
       <Button type="secondary" size="small">Hello</Button>
       <Button type="primary">Hello</Button>
       <Button type="success" size="large">Hello</Button>
+      <Button type="warning" size="small">Hello</Button>
+      <Button type="info" size="medium">Hello</Button>
+      <Button type="dark" size="large">Hello</Button>
     </div>
   </div>
 );