diff --git a/.size-limit.js b/.size-limit.js
index 2cff31bb2ed41a..f707fa5eef8add 100644
--- a/.size-limit.js
+++ b/.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',
diff --git a/docs/src/modules/components/Link.js b/docs/src/modules/components/Link.js
index f2c99e515cecb6..b3accc8ae1f3de 100644
--- a/docs/src/modules/components/Link.js
+++ b/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 ;
- }
-}
-
-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 = (
-
{children}
-
+
);
} else {
ComponentRoot = 'a';
diff --git a/docs/src/pages/demos/tabs/tabs.md b/docs/src/pages/demos/tabs/tabs.md
index deec59e7dcea8d..c87120db27f378 100644
--- a/docs/src/pages/demos/tabs/tabs.md
+++ b/docs/src/pages/demos/tabs/tabs.md
@@ -1,5 +1,5 @@
---
-title: Tab React component
+title: Tabs React component
components: Tabs, Tab
---
diff --git a/docs/src/pages/style/icons/FontAwesome.js b/docs/src/pages/style/icons/FontAwesome.js
new file mode 100644
index 00000000000000..bfee234c76e4c6
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+FontAwesome.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(FontAwesome);
diff --git a/docs/src/pages/style/icons/icons.md b/docs/src/pages/style/icons/icons.md
index a21792fa8710e2..2a571c5af2abc8 100644
--- a/docs/src/pages/style/icons/icons.md
+++ b/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}}
diff --git a/pages/style/icons.js b/pages/style/icons.js
index 61103c466ef789..0ac9c9d83a8ed3 100644
--- a/pages/style/icons.js
+++ b/pages/style/icons.js
@@ -8,13 +8,6 @@ function Page() {