Merge pull request #274 from epilgrim/feature/custom-icons

Enabled passing components as icons in all the components

components/button/Button.jsx

@@ -13,7 +13,7 @@ class Button extends React.Component {
     flat: React.PropTypes.bool,
     floating: React.PropTypes.bool,
     href: React.PropTypes.string,
-    icon: React.PropTypes.string,
+    icon: React.PropTypes.any,
     inverse: React.PropTypes.bool,
     label: React.PropTypes.string,
     mini: React.PropTypes.bool,

components/button/IconButton.jsx

@@ -11,7 +11,7 @@ class IconButton extends React.Component {
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     href: React.PropTypes.string,
-    icon: React.PropTypes.string,
+    icon: React.PropTypes.any,
     inverse: React.PropTypes.bool,
     neutral: React.PropTypes.bool,
     primary: React.PropTypes.bool,

components/font_icon/FontIcon.jsx

@@ -3,7 +3,7 @@ import ClassNames from 'classnames';
 
 const FontIcon = ({ children, className, value, ...other}) => {
   const classes = ClassNames(
-    {'material-icons': !React.isValidElement(value)},
+    {'material-icons': typeof value === 'string'},
     className
   );
   return (
@@ -17,7 +17,10 @@ const FontIcon = ({ children, className, value, ...other}) => {
 FontIcon.propTypes = {
   children: React.PropTypes.any,
   className: React.PropTypes.string,
-  value: React.PropTypes.any
+  value: React.PropTypes.oneOfType([
+    React.PropTypes.string,
+    React.PropTypes.element
+  ])
 };
 
 FontIcon.defaultProps = {

components/link/Link.jsx

@@ -23,7 +23,7 @@ Link.propTypes = {
   children: React.PropTypes.node,
   className: React.PropTypes.string,
   count: React.PropTypes.number,
-  icon: React.PropTypes.string,
+  icon: React.PropTypes.any,
   label: React.PropTypes.string
 };
 

components/list/ListItem.jsx

@@ -12,10 +12,10 @@ class ListItem extends React.Component {
     children: React.PropTypes.any,
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
-    leftIcon: React.PropTypes.string,
+    leftIcon: React.PropTypes.any,
     legend: React.PropTypes.string,
     onClick: React.PropTypes.func,
-    rightIcon: React.PropTypes.string,
+    rightIcon: React.PropTypes.any,
     ripple: React.PropTypes.bool,
     selectable: React.PropTypes.bool,
     to: React.PropTypes.string

components/menu/IconMenu.jsx

@@ -7,7 +7,7 @@ class IconMenu extends React.Component {
   static propTypes = {
     children: React.PropTypes.node,
     className: React.PropTypes.string,
-    icon: React.PropTypes.string,
+    icon: React.PropTypes.any,
     iconRipple: React.PropTypes.bool,
     menuRipple: React.PropTypes.bool,
     onClick: React.PropTypes.func,

components/menu/MenuItem.jsx

@@ -10,7 +10,7 @@ class MenuItem extends React.Component {
     children: React.PropTypes.any,
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
-    icon: React.PropTypes.string,
+    icon: React.PropTypes.any,
     onClick: React.PropTypes.func,
     selected: React.PropTypes.bool,
     shortcut: React.PropTypes.string

components/snackbar/Snackbar.jsx

@@ -10,7 +10,7 @@ class Snackbar extends React.Component {
     action: React.PropTypes.string,
     active: React.PropTypes.bool,
     className: React.PropTypes.string,
-    icon: React.PropTypes.string,
+    icon: React.PropTypes.any,
     label: React.PropTypes.string.isRequired,
     onClick: React.PropTypes.func,
     onTimeout: React.PropTypes.func,

spec/components/input.jsx

@@ -28,7 +28,7 @@ class InputTest extends React.Component {
         <Input type='text' value='Read only' readOnly label='Phone Number' />
         <Input type='text' label='Disabled field' disabled />
         <Input type='tel' value={this.state.withIcon} label='With icon' onChange={this.handleChange.bind(this, 'withIcon')} icon='phone' />
-        <Input type='tel' value={this.state.withCustomIcon} label='With custom icon' onChange={this.handleChange.bind(this, 'withCustomIcon')} icon={<span>A</span>} />
+        <Input type='tel' value={this.state.withCustomIcon} label='With custom icon' onChange={this.handleChange.bind(this, 'withCustomIcon')} icon={<span>P</span>} />
       </section>
     );
   }