[docs] Add a demo with Font Awesome (#12027)

.size-limit.js

@@ -27,7 +27,7 @@ module.exports = [
     name: 'The size of all the modules of material-ui.',
     webpack: true,
     path: 'packages/material-ui/build/index.js',
-    limit: '94.6 KB',
+    limit: '95.3 KB',
   },
   {
     name: 'The main bundle of the docs',

docs/src/modules/components/Link.js

@@ -1,3 +1,5 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -29,29 +31,6 @@ const styles = theme => ({
   },
 });
 
-class OnClick extends React.Component {
-  handleClick = event => {
-    if (this.props.onClick) {
-      this.props.onClick(event);
-    }
-
-    if (this.props.onCustomClick) {
-      this.props.onCustomClick(event);
-    }
-  };
-
-  render() {
-    const { component: ComponentProp, onCustomClick, ...props } = this.props;
-    return <ComponentProp {...props} onClick={this.handleClick} />;
-  }
-}
-
-OnClick.propTypes = {
-  component: PropTypes.string.isRequired,
-  onClick: PropTypes.func,
-  onCustomClick: PropTypes.func,
-};
-
 function Link(props) {
   const {
     activeClassName,
@@ -86,16 +65,15 @@ function Link(props) {
       passHref: true,
     };
     children = (
-      <OnClick
-        component="a"
+      <a
         className={classNames(className, {
           [activeClassName]: router.pathname === href && activeClassName,
         })}
-        onCustomClick={onClick}
+        onClick={onClick}
         {...other}
       >
         {children}
-      </OnClick>
+      </a>
     );
   } else {
     ComponentRoot = 'a';

docs/src/pages/demos/tabs/tabs.md

@@ -1,5 +1,5 @@
 ---
-title: Tab React component
+title: Tabs React component
 components: Tabs, Tab
 ---
 

docs/src/pages/style/icons/FontAwesome.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { loadCSS } from 'fg-loadcss/src/loadCSS';
+import { withStyles } from '@material-ui/core/styles';
+import red from '@material-ui/core/colors/red';
+import Icon from '@material-ui/core/Icon';
+
+const styles = theme => ({
+  root: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+  },
+  icon: {
+    margin: theme.spacing.unit * 2,
+  },
+  iconHover: {
+    margin: theme.spacing.unit * 2,
+    '&:hover': {
+      color: red[800],
+    },
+  },
+});
+
+class FontAwesome extends React.Component {
+  componentDidMount() {
+    loadCSS(
+      'https://use.fontawesome.com/releases/v5.1.0/css/all.css',
+      document.querySelector('#insertion-point-jss'),
+    );
+  }
+
+  render() {
+    const { classes } = this.props;
+
+    return (
+      <div className={classes.root}>
+        <Icon className={classNames(classes.icon, 'fa fa-plus-circle')} />
+        <Icon className={classNames(classes.icon, 'fa fa-plus-circle')} color="primary" />
+        <Icon className={classNames(classes.icon, 'fa fa-plus-circle')} color="secondary" />
+        <Icon className={classNames(classes.icon, 'fa fa-plus-circle')} color="action" />
+        <Icon
+          className={classNames(classes.iconHover, 'fa fa-plus-circle')}
+          color="error"
+          style={{ fontSize: 30 }}
+        />
+        <Icon
+          className={classNames(classes.icon, 'fa fa-plus-circle')}
+          color="disabled"
+          style={{ fontSize: 36 }}
+        />
+      </div>
+    );
+  }
+}
+
+FontAwesome.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(FontAwesome);

docs/src/pages/style/icons/icons.md

@@ -58,6 +58,7 @@ There are three exceptions to this rule:
 {{"demo": "pages/style/icons/SvgMaterialIcons.js"}}
 
 #### More SVG icons
+
 Looking for even more SVG icons? There are a lot of projects out there,
 but [https://materialdesignicons.com](https://materialdesignicons.com/) provides over 2,000 official and community provided icons.
 [mdi-material-ui](https://github.com/TeamWertarbyte/mdi-material-ui) packages these icons as Material-UI SvgIcons in much the same way as [@material-ui/icons](https://www.npmjs.com/package/@material-ui/icons) does for the official icons.
@@ -83,4 +84,10 @@ for example:
 By default, an Icon will inherit the current text color.
 Optionally, you can set the icon color using one of the theme color properties: `primary`, `secondary`, `action`, `error` & `disabled`.
 
+#### Font Material icons
+
 {{"demo": "pages/style/icons/Icons.js"}}
+
+#### [Font Awesome](https://fontawesome.com/icons)
+
+{{"demo": "pages/style/icons/FontAwesome.js", "hideEditButton": true}}

pages/style/icons.js

@@ -8,13 +8,6 @@ function Page() {
     <MarkdownDocs
       markdown={markdown}
       demos={{
-        'pages/style/icons/Icons.js': {
-          js: require('docs/src/pages/style/icons/Icons').default,
-          raw: preval`
-module.exports = require('fs')
-  .readFileSync(require.resolve('docs/src/pages/style/icons/Icons'), 'utf8')
-`,
-        },
         'pages/style/icons/SvgIcons.js': {
           js: require('docs/src/pages/style/icons/SvgIcons').default,
           raw: preval`
@@ -27,6 +20,20 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/style/icons/SvgMaterialIcons'), 'utf8')
+`,
+        },
+        'pages/style/icons/Icons.js': {
+          js: require('docs/src/pages/style/icons/Icons').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/style/icons/Icons'), 'utf8')
+`,
+        },
+        'pages/style/icons/FontAwesome.js': {
+          js: require('docs/src/pages/style/icons/FontAwesome').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/style/icons/FontAwesome'), 'utf8')
 `,
         },
       }}