Merge pull request mui#1024 from Zadielerick/googleFontIcons

[Font Icons] Google material icons support
astrails · Jul 3, 2015 · 6ab92bd · 6ab92bd
2 parents e646ec2 + fecd687
commit 6ab92bd
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 24 deletions.
diff --git a/docs/src/app/components/pages/components/icon-buttons.jsx b/docs/src/app/components/pages/components/icon-buttons.jsx
@@ -21,9 +21,9 @@ class IconButtonsPage extends React.Component {
         '<IconButton tooltip="Sort" disabled={true}>\n' +
         '  <FontIcon className="muidocs-icon-custom-sort"/>\n' +
         '</IconButton>\n\n' +
-        '//Adding tooltipPosition to Icon Button\n' +
-        '<IconButton iconClassName="muidocs-icon-custom-github" tooltip="bottom-right"\n' +
-        '            tooltipPosition="bottom-right"/>\n';
+        '//Method 4: Using Google material-icons\n' + 
+        ' <IconButton className="material-icons" tooltipAlignment="bottom-center" \n' + 
+        '  tooltip="Sky">settings_system_daydream</IconButton>';
 
     let desc = (
       <p>
@@ -50,6 +50,10 @@ class IconButtonsPage extends React.Component {
             similiar to how the iconClassName prop from method 1 is
             handled.
           </li>
+          <li>
+            Google Material Icons: Now also supported for iconButtons by passing "material-icons" in 
+            iconClassName prop.
+          </li>
         </ol>
       </p>
     );
@@ -168,6 +172,9 @@ class IconButtonsPage extends React.Component {
         <IconButton tooltip="Sort" disabled={true}>
           <FontIcon className="muidocs-icon-custom-sort"/>
         </IconButton>
+        <br/><br/><br/>
+
+        <IconButton iconClassName="material-icons" tooltip="Sky">settings_system_daydream</IconButton>
       </ComponentDoc>
     );
 

diff --git a/src/icon-button.jsx b/src/icon-button.jsx
@@ -49,17 +49,6 @@ let IconButton = React.createClass({
     };
   },
 
-  componentDidMount() {
-    if (process.env.NODE_ENV !== 'production') {
-      if (this.props.iconClassName && this.props.children) {
-        let warning = 'You have set both an iconClassName and a child icon. ' +
-                      'It is recommended you use only one method when adding ' +
-                      'icons to IconButtons.';
-        console.warn(warning);
-      }
-    }
-  },
-
   getStyles() {
     let spacing = this.context.muiTheme.spacing;
     let palette = this.context.muiTheme.palette;
@@ -71,7 +60,8 @@ let IconButton = React.createClass({
         transition: Transitions.easeOut(),
         padding: spacing.iconSize / 2,
         width: spacing.iconSize*2,
-        height: spacing.iconSize*2
+        height: spacing.iconSize*2,
+        fontSize: 0
       },
       tooltip: {
         boxSizing: 'border-box',
@@ -133,7 +123,8 @@ let IconButton = React.createClass({
             styles.icon,
             disabled ? styles.disabled : {},
             iconStyleFontIcon
-          )}/>
+          )}>
+          {this.props.children}</FontIcon>
       );
     }
 

diff --git a/src/utils/children.js b/src/utils/children.js
@@ -4,17 +4,18 @@ module.exports = {
 
   extend(children, extendedProps, extendedChildren) {
 
-    return React.Children.map(children, (child) => {
+    return React.isValidElement(children) ?
+      React.Children.map(children, (child) => {
 
-      let newProps = typeof(extendedProps) === 'function' ?
-        extendedProps(child) : extendedProps;
+        let newProps = typeof(extendedProps) === 'function' ?
+          extendedProps(child) : extendedProps;
 
-      let newChildren = typeof(extendedChildren) === 'function' ?
-        extendedChildren(child) : extendedChildren ?
-        extendedChildren : child.props.children;
+        let newChildren = typeof(extendedChildren) === 'function' ?
+          extendedChildren(child) : extendedChildren ?
+          extendedChildren : child.props.children;
 
-      return React.cloneElement(child, newProps, newChildren);
-    });
+        return React.cloneElement(child, newProps, newChildren);
+      }) : children;
   }
 
 };