Font icon components

docs/gulp/config.js

@@ -25,13 +25,9 @@ module.exports = {
     src: src + "/www/**",
     dest: dest
   },
-  fonts: {
-    src: mui + '/less/material-design-fonticons/fonts/**',
-    dest: dest + '/fonts/mdfonticon'
-  },
-  muiFonts: {
-    src: mui + '/less/material-ui-icons/fonts/**',
-    dest: dest + '/fonts'
+  fontIcons: {
+    src: src + "/less/font-icons/**",
+    dest: dest + '/font-icons'
   },
   browserify: {
     // Enable source maps

docs/gulp/tasks/build.js

@@ -1,3 +1,3 @@
 var gulp = require('gulp');
 
-gulp.task('build', ['browserify', 'markup', 'less', 'fonts', 'muiFonts']);
+gulp.task('build', ['browserify', 'markup', 'less', 'fontIcons']);

docs/gulp/tasks/fonts.js → docs/gulp/tasks/fontIcons.js

@@ -1,7 +1,7 @@
 var gulp = require('gulp');
-var config = require('../config').fonts;
+var config = require('../config').fontIcons;
 
-gulp.task('fonts', function() {
+gulp.task('fontIcons', function() {
   return gulp.src(config.src)
     .pipe(gulp.dest(config.dest));
 });

docs/src/app/app-routes.jsx

@@ -19,8 +19,8 @@ var Buttons = require('./components/pages/components/buttons.jsx');
 var DatePicker = require('./components/pages/components/date-picker.jsx');
 var Dialog = require('./components/pages/components/dialog.jsx');
 var DropDownMenu = require('./components/pages/components/drop-down-menu.jsx');
-var IconButtons = require('./components/pages/components/icon-buttons.jsx');
 var Icons = require('./components/pages/components/icons.jsx');
+var IconButtons = require('./components/pages/components/icon-buttons.jsx');
 var LeftNav = require('./components/pages/components/left-nav.jsx');
 var Menus = require('./components/pages/components/menus.jsx');
 var Paper = require('./components/pages/components/paper.jsx');
@@ -56,8 +56,8 @@ var AppRoutes = (
       <Route name="date-picker" handler={DatePicker} />
       <Route name="dialog" handler={Dialog} />
       <Route name="dropdown-menu" handler={DropDownMenu} />
-      <Route name="icon-buttons" handler={IconButtons} />
       <Route name="icons" handler={Icons} />
+      <Route name="icon-buttons" handler={IconButtons} />
       <Route name="left-nav" handler={LeftNav} />
       <Route name="menus" handler={Menus} />
       <Route name="paper" handler={Paper} />

docs/src/app/components/component-doc.jsx

@@ -1,9 +1,13 @@
 var React = require('react');
+var mui = require('mui');
+var Classable = mui.Mixins.Classable;
 var CodeExample = require('./code-example/code-example.jsx');
 var ComponentInfo = require('./component-info.jsx');
 
 var ComponentDoc = React.createClass({
 
+  mixins: [Classable],
+
   propTypes: {
     code: React.PropTypes.string.isRequired,
     desc: React.PropTypes.string,
@@ -12,6 +16,8 @@ var ComponentDoc = React.createClass({
   },
 
   render: function() {
+    var classes = this.getClasses("component-doc");
+
     var componentInfo = this.props.componentInfo.map(function(info, i) {
       return (
         <ComponentInfo
@@ -21,12 +27,18 @@ var ComponentDoc = React.createClass({
       );
     });
 
-    var desc = this.props.desc ? (
-      <p className="mui-font-style-subhead-1 component-doc-desc">{this.props.desc}</p>
-    ) : null;
+    var desc = null;
+
+    if (this.props.desc) {
+      if ((typeof this.props.desc) == "string") {
+        desc = <p className="mui-font-style-subhead-1 component-doc-desc">{this.props.desc}</p>
+      } else {
+        desc = <div className="mui-font-style-subhead-1 component-doc-desc">{this.props.desc}</div>
+      }
+    }
 
     return (
-      <div className="component-doc">
+      <div className={classes}>
 
         <h2 className="mui-font-style-headline">{this.props.name}</h2>
 

docs/src/app/components/master.jsx

@@ -21,7 +21,7 @@ var Master = React.createClass({
     var githubButton = (
       <IconButton
         className="github-icon-button"
-        icon="mui-icon-github"
+        iconClassName="muidocs-icon-custom-github"
         href="https://github.com/callemall/material-ui"
         linkButton={true} />
     );

docs/src/app/components/pages/components.jsx

@@ -9,8 +9,8 @@ var Components = React.createClass({
       { route: 'date-picker', text: 'Date Picker'},
       { route: 'dialog', text: 'Dialog'},
       { route: 'dropdown-menu', text: 'Dropdown Menu'},
-      { route: 'icon-buttons', text: 'Icon Buttons'},
       { route: 'icons', text: 'Icons'},
+      { route: 'icon-buttons', text: 'Icon Buttons'},
       { route: 'left-nav', text: 'Left Nav'},
       { route: 'menus', text: 'Menus'},
       { route: 'paper', text: 'Paper'},

docs/src/app/components/pages/components/buttons.jsx

@@ -21,12 +21,12 @@ var ButtonPage = React.createClass({
       '<RaisedButton label="Secondary" secondary={true} />\n' +
       '<RaisedButton label="Disabled" disabled={true} />\n\n' +
       '//Floating Action Buttons\n' +
-      '<FloatingActionButton icon="action-grade" />\n' +
-      '<FloatingActionButton icon="action-grade" mini={true} />\n' +
-      '<FloatingActionButton icon="action-grade" disabled={true} />\n' +
-      '<FloatingActionButton icon="action-grade" mini={true} disabled={true} />\n' +
-      '<FloatingActionButton icon="action-grade" secondary={true} />\n' +
-      '<FloatingActionButton icon="action-grade" mini={true} secondary={true} />';
+      '<FloatingActionButton iconClassName="muidocs-icon-action-grade" />\n' +
+      '<FloatingActionButton iconClassName="muidocs-icon-action-grade" mini={true} />\n' +
+      '<FloatingActionButton iconClassName="muidocs-icon-action-grade" disabled={true} />\n' +
+      '<FloatingActionButton iconClassName="muidocs-icon-action-grade" mini={true} disabled={true} />\n' +
+      '<FloatingActionButton iconClassName="muidocs-icon-action-grade" secondary={true} />\n' +
+      '<FloatingActionButton iconClassName="muidocs-icon-action-grade" mini={true} secondary={true} />';
 
     var desc = 'This component generates a button element and all props except for ' +
       'the custom props below will be passed down to the button element. Also, ' +
@@ -97,11 +97,12 @@ var ButtonPage = React.createClass({
         name: 'Floating Action Button',
         infoArray: [
           {
-            name: 'icon',
+            name: 'iconClassName',
             type: 'string',
-            header: 'required',
-            desc: 'This is the name of the icon to display inside the button. This only applies to ' +
-              'floating action buttons.'
+            header: 'optional',
+            desc: 'This is the classname of the icon to display inside the button. This only applies to ' +
+              'floating action buttons. An alternative to adding an icon would be to insert a custom svg ' + 
+              'component or FontIcon as a child.'
           },
           {
             name: 'linkButton',
@@ -166,25 +167,25 @@ var ButtonPage = React.createClass({
 
           <div className="button-example-group">
             <div className="button-example-container">
-              <FloatingActionButton icon="action-grade" />
+              <FloatingActionButton iconClassName="muidocs-icon-action-grade" />
             </div>
             <div className="button-example-container">
-              <FloatingActionButton icon="action-grade" mini={true} />
+              <FloatingActionButton iconClassName="muidocs-icon-action-grade" mini={true} />
             </div>
             <div className="button-example-container">
-              <FloatingActionButton icon="action-grade" disabled={true} />
+              <FloatingActionButton iconClassName="muidocs-icon-action-grade" disabled={true} />
             </div>
             <div className="button-example-container">
-              <FloatingActionButton icon="action-grade" mini={true} disabled={true} />
+              <FloatingActionButton iconClassName="muidocs-icon-action-grade" mini={true} disabled={true} />
             </div>
           </div>
 
           <div className="button-example-group">
             <div className="button-example-container">
-              <FloatingActionButton icon="action-grade" secondary={true} />
+              <FloatingActionButton iconClassName="muidocs-icon-action-grade" secondary={true} />
             </div>
             <div className="button-example-container">
-              <FloatingActionButton icon="action-grade" mini={true} secondary={true} />
+              <FloatingActionButton iconClassName="muidocs-icon-action-grade" mini={true} secondary={true} />
             </div>
           </div>
 

docs/src/app/components/pages/components/icon-buttons.jsx

@@ -1,30 +1,66 @@
 var React = require('react');
 var mui = require('mui');
 var IconButton = mui.IconButton;
+var NavigationMenu = mui.Icons.NavigationMenu;
 var ComponentDoc = require('../../component-doc.jsx');
+var ActionGrade = require('../../svg-icons/action-grade.jsx');
+var ActionHome = require('../../svg-icons/action-home.jsx');
+var FontIcon = mui.FontIcon;
 
 var IconButtonsPage = React.createClass({
 
   render: function() {
 
     var code =
-      '<IconButton icon="action-grade" tooltip="star" />\n' +
-      '<IconButton icon="action-grade" tooltip="star" touch={true} />\n' +
-      '<IconButton icon="action-grade" tooltip="star" disabled={true} />';
+        '//Method 1: muidocs-icon-github is defined in a style sheet.\n' +
+        '<IconButton iconClassName="muidocs-icon-custom-github" tooltip="GitHub"/>\n\n' +
+        '//Method 2: ActionGrade is a component created using mui.SvgIcon.\n' +
+        '<IconButton tooltip="Star" touch={true}>\n' +
+        '  <ActionGrade/>\n' +
+        '</IconButton>\n\n' +
+        '//Method 3: Manually creating a mui.FontIcon component within ' +
+        'IconButton\n' +
+        '<IconButton tooltip="Sort" disabled={true}>\n' +
+        '  <FontIcon className="muidocs-icon-custom-sort"/>\n' +
+        '</IconButton>';
 
-    var desc = 'This component generates a button element and all props except for ' +
-      '"icon" will be passed down to the button element. Also, focus styles ' +
-      'will happen on tab but not on click.';
+    var desc =  <p>
+                  This component generates a button element and all props. 
+                  Also, focus styles will happen on tab but not on click. 
+                  There are three ways to add an icon:
+                  <br/>
+                  <ol>
+                    <li>
+                      For stylesheets: Set the prop "iconClassName" to the 
+                      classname for you icon.
+                    </li>
+                    <li>
+                      For svg icons: Insert the svg component as a child of icon
+                      buttons. This is the method we are using. <a title="Source 
+                      code for ActionGrade" href="https://github.com/mmrtnz/material-ui/blob/font-icon-components/docs/src/app/components/svg-icons/action-grade.jsx">
+                      View our source</a> to see how ActionGrade was created 
+                      using mui.SvgIcon.
+                    </li>
+                    <li>
+                      Alternative: You can also insert a <a title="Redirect to 
+                      Material UI's FontIcon component" href="#/components/icons">
+                      FontIcon</a> component as a child of IconButton. This is 
+                      similiar to how the iconClassName prop from method 1 is 
+                      handled.
+                    </li>
+                  </ol>
+                </p>;
 
     var componentInfo = [
       {
         name: 'Props',
         infoArray: [
           {
-            name: 'icon',
+            name: 'iconClassName',
             type: 'string',
-            header: 'required',
-            desc: 'The name of the icon to use.'
+            header: 'optional',
+            desc: 'If you are using a stylesheet for your icons, enter the ' + 
+                  'class name for the icon to be used here.'
           },
           {
             name: 'tooltip',
@@ -49,9 +85,15 @@ var IconButtonsPage = React.createClass({
         desc={desc}
         componentInfo={componentInfo}>
 
-        <IconButton icon="action-grade" tooltip="Star" />
-        <IconButton icon="action-grade" tooltip="Star" touch={true} />
-        <IconButton icon="action-grade" tooltip="Star" disabled={true} />
+        <IconButton iconClassName="muidocs-icon-custom-github" tooltip="GitHub"/>
+
+        <IconButton tooltip="Star" touch={true}>
+          <ActionGrade/>
+        </IconButton>
+
+        <IconButton tooltip="Sort" disabled={true}>
+          <FontIcon className="muidocs-icon-custom-sort"/>
+        </IconButton>
 
       </ComponentDoc>
     );