[Icons] Update Material Design Icons (#12016)

* [Icons] Update Material Design Icons

* Use svgo

* remove extra <g></g?, and stray comments

* Update Icon docs page

* some fixes

* let's merge

.eslintignore

@@ -12,7 +12,7 @@
 /packages/material-ui-codemod/src/*/*.test.js
 /packages/material-ui-icons/src
 /packages/material-ui-icons/test/fixtures
-/packages/material-ui-icons/tpl
+/packages/material-ui-icons/templateSvgIcon.js
 /tmp
 build
 node_modules

.gitignore

@@ -12,6 +12,7 @@
 /coverage
 /docs/export
 /packages/material-ui-codemod/lib
+/packages/material-ui-icons/material-design-icons
 /test/regressions/screenshots
 /test/selenium-output
 /tmp

docs/src/modules/components/AppFrame.js

@@ -11,12 +11,12 @@ import Toolbar from '@material-ui/core/Toolbar';
 import IconButton from '@material-ui/core/IconButton';
 import Tooltip from '@material-ui/core/Tooltip';
 import MenuIcon from '@material-ui/icons/Menu';
-import LightbulbOutline from '@material-ui/icons/LightbulbOutline';
-import LightbublFull from '@material-ui/docs/svgIcons/LightbublFull';
+import LightbulbOutlineIcon from '@material-ui/docs/svgIcons/LightbulbOutline';
+import LightbulbFullIcon from '@material-ui/docs/svgIcons/LightbulbFull';
 import NProgressBar from '@material-ui/docs/NProgressBar';
 import FormatTextdirectionLToR from '@material-ui/icons/FormatTextdirectionLToR';
 import FormatTextdirectionRToL from '@material-ui/icons/FormatTextdirectionRToL';
-import Github from '@material-ui/docs/svgIcons/GitHub';
+import GithubIcon from '@material-ui/docs/svgIcons/GitHub';
 import AppDrawer from 'docs/src/modules/components/AppDrawer';
 import AppSearch from 'docs/src/modules/components/AppSearch';
 import Notifications from 'docs/src/modules/components/Notifications';
@@ -152,7 +152,7 @@ class AppFrame extends React.Component {
                 onClick={this.handleTogglePaletteType}
                 aria-labelledby="appbar-theme"
               >
-                {uiTheme.paletteType === 'light' ? <LightbulbOutline /> : <LightbublFull />}
+                {uiTheme.paletteType === 'light' ? <LightbulbOutlineIcon /> : <LightbulbFullIcon />}
               </IconButton>
             </Tooltip>
             <Tooltip
@@ -179,7 +179,7 @@ class AppFrame extends React.Component {
                 href="https://github.com/mui-org/material-ui"
                 aria-labelledby="appbar-github"
               >
-                <Github />
+                <GithubIcon />
               </IconButton>
             </Tooltip>
           </Toolbar>

docs/src/modules/components/Demo.js

@@ -6,7 +6,7 @@ import copy from 'clipboard-copy';
 import { withStyles } from '@material-ui/core/styles';
 import IconButton from '@material-ui/core/IconButton';
 import Collapse from '@material-ui/core/Collapse';
-import ModeEditIcon from '@material-ui/icons/ModeEdit';
+import EditIcon from '@material-ui/icons/Edit';
 import CodeIcon from '@material-ui/icons/Code';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
@@ -226,7 +226,7 @@ class Demo extends React.Component {
                     onClick={this.handleClickCodeSandbox}
                     aria-labelledby={`demo-codesandbox-${index}`}
                   >
-                    <ModeEditIcon />
+                    <EditIcon />
                   </IconButton>
                 </Tooltip>
               )}

docs/src/modules/components/HomeSteps.js

@@ -6,7 +6,7 @@ import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
 import Button from '@material-ui/core/Button';
 import Divider from '@material-ui/core/Divider';
-import FileDownloadIcon from '@material-ui/icons/FileDownload';
+import FileDownloadIcon from '@material-ui/docs/svgIcons/FileDownload';
 import BuildIcon from '@material-ui/icons/Build'; // eslint-disable-line import/no-unresolved
 import WhatshotIcon from '@material-ui/icons/Whatshot';
 import MarkdownElement from '@material-ui/docs/MarkdownElement';

docs/src/pages/demos/buttons/FloatingActionButtonZoom.js

@@ -10,7 +10,7 @@ import Typography from '@material-ui/core/Typography';
 import Zoom from '@material-ui/core/Zoom';
 import Button from '@material-ui/core/Button';
 import AddIcon from '@material-ui/icons/Add';
-import EditIcon from '@material-ui/icons/ModeEdit';
+import EditIcon from '@material-ui/icons/Edit';
 import UpIcon from '@material-ui/icons/KeyboardArrowUp';
 import green from '@material-ui/core/colors/green';
 

docs/src/pages/demos/buttons/IconLabelButtons.js

@@ -3,11 +3,11 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Button from '@material-ui/core/Button';
 import { withStyles } from '@material-ui/core/styles';
-import Delete from '@material-ui/icons/Delete';
-import FileUpload from '@material-ui/icons/FileUpload';
-import KeyboardVoice from '@material-ui/icons/KeyboardVoice';
+import DeleteIcon from '@material-ui/icons/Delete';
+import CloudUploadIcon from '@material-ui/icons/CloudUpload';
+import KeyboardVoiceICon from '@material-ui/icons/KeyboardVoice';
 import Icon from '@material-ui/core/Icon';
-import Save from '@material-ui/icons/Save';
+import SaveIcon from '@material-ui/icons/Save';
 
 const styles = theme => ({
   button: {
@@ -30,22 +30,22 @@ function IconLabelButtons(props) {
     <div>
       <Button variant="contained" color="secondary" className={classes.button}>
         Delete
-        <Delete className={classes.rightIcon} />
+        <DeleteIcon className={classes.rightIcon} />
       </Button>
       <Button variant="contained" color="primary" className={classes.button}>
         Send
         <Icon className={classes.rightIcon}>send</Icon>
       </Button>
       <Button variant="contained" color="default" className={classes.button}>
         Upload
-        <FileUpload className={classes.rightIcon} />
+        <CloudUploadIcon className={classes.rightIcon} />
       </Button>
       <Button variant="contained" disabled color="secondary" className={classes.button}>
-        <KeyboardVoice className={classes.leftIcon} />
+        <KeyboardVoiceICon className={classes.leftIcon} />
         Talk
       </Button>
       <Button variant="contained" size="small" className={classes.button}>
-        <Save className={classNames(classes.leftIcon, classes.iconSmall)} />
+        <SaveIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
         Save
       </Button>
     </div>

docs/src/pages/lab/speed-dial/OpenIconSpeedDial.js

@@ -5,12 +5,12 @@ import Button from '@material-ui/core/Button';
 import SpeedDial from '@material-ui/lab/SpeedDial';
 import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon';
 import SpeedDialAction from '@material-ui/lab/SpeedDialAction';
-import ContentCopyIcon from '@material-ui/icons/ContentCopy';
+import FileCopyIcon from '@material-ui/icons/FileCopyOutlined';
 import SaveIcon from '@material-ui/icons/Save';
 import PrintIcon from '@material-ui/icons/Print';
 import ShareIcon from '@material-ui/icons/Share';
 import DeleteIcon from '@material-ui/icons/Delete';
-import EditIcon from '@material-ui/icons/ModeEdit';
+import EditIcon from '@material-ui/icons/Edit';
 
 const styles = theme => ({
   root: {
@@ -24,7 +24,7 @@ const styles = theme => ({
 });
 
 const actions = [
-  { icon: <ContentCopyIcon />, name: 'Copy' },
+  { icon: <FileCopyIcon />, name: 'Copy' },
   { icon: <SaveIcon />, name: 'Save' },
   { icon: <PrintIcon />, name: 'Print' },
   { icon: <ShareIcon />, name: 'Share' },

docs/src/pages/lab/speed-dial/SpeedDials.js

@@ -5,7 +5,7 @@ import Button from '@material-ui/core/Button';
 import SpeedDial from '@material-ui/lab/SpeedDial';
 import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon';
 import SpeedDialAction from '@material-ui/lab/SpeedDialAction';
-import ContentCopyIcon from '@material-ui/icons/ContentCopy';
+import FileCopyIcon from '@material-ui/icons/FileCopyOutlined';
 import SaveIcon from '@material-ui/icons/Save';
 import PrintIcon from '@material-ui/icons/Print';
 import ShareIcon from '@material-ui/icons/Share';
@@ -23,7 +23,7 @@ const styles = theme => ({
 });
 
 const actions = [
-  { icon: <ContentCopyIcon />, name: 'Copy' },
+  { icon: <FileCopyIcon />, name: 'Copy' },
   { icon: <SaveIcon />, name: 'Save' },
   { icon: <PrintIcon />, name: 'Print' },
   { icon: <ShareIcon />, name: 'Share' },

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

@@ -1,8 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import AlarmIcon from '@material-ui/icons/Alarm';
-import AlarmOffIcon from '@material-ui/icons/AlarmOff';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import DeleteIcon from '@material-ui/icons/Delete';
+import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined';
+import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
+import DeleteTwoToneIcon from '@material-ui/icons/DeleteTwoTone';
+import DeleteSharpIcon from '@material-ui/icons/DeleteSharp';
+import DeleteForeverIcon from '@material-ui/icons/DeleteForever';
+import DeleteForeverOutlinedIcon from '@material-ui/icons/DeleteForeverOutlined';
+import DeleteForeverRoundedIcon from '@material-ui/icons/DeleteForeverRounded';
+import DeleteForeverTwoToneIcon from '@material-ui/icons/DeleteForeverTwoTone';
+import DeleteForeverSharpIcon from '@material-ui/icons/DeleteForeverSharp';
 import ThreeDRotationIcon from '@material-ui/icons/ThreeDRotation';
+import FourKIcon from '@material-ui/icons/FourK';
+import ThreeSixtyIcon from '@material-ui/icons/ThreeSixty';
 import { withStyles } from '@material-ui/core/styles';
 
 const styles = theme => ({
@@ -11,17 +23,58 @@ const styles = theme => ({
   },
   icon: {
     margin: theme.spacing.unit,
+    fontSize: 32,
   },
 });
 
 function SvgMaterialIcons(props) {
   const { classes } = props;
   return (
-    <div className={classes.root}>
-      <AlarmIcon className={classes.icon} />
-      <AlarmOffIcon className={classes.icon} />
-      <ThreeDRotationIcon className={classes.icon} />
-    </div>
+    <Grid container className={classes.root}>
+      <Grid item xs={4}>
+        <Typography>Filled</Typography>
+      </Grid>
+      <Grid item xs={8}>
+        <DeleteIcon className={classes.icon} />
+        <DeleteForeverIcon className={classes.icon} />
+      </Grid>
+      <Grid item xs={4}>
+        <Typography>Outlined</Typography>
+      </Grid>
+      <Grid item xs={8}>
+        <DeleteOutlinedIcon className={classes.icon} />
+        <DeleteForeverOutlinedIcon className={classes.icon} />
+      </Grid>
+      <Grid item xs={4}>
+        <Typography>Rounded</Typography>
+      </Grid>
+      <Grid item xs={8}>
+        <DeleteRoundedIcon className={classes.icon} />
+        <DeleteForeverRoundedIcon className={classes.icon} />
+      </Grid>
+      <Grid item xs={4}>
+        <Typography>Two Tone</Typography>
+      </Grid>
+      <Grid item xs={8}>
+        <DeleteTwoToneIcon className={classes.icon} />
+        <DeleteForeverTwoToneIcon className={classes.icon} />
+      </Grid>
+      <Grid item xs={4}>
+        <Typography>Sharp</Typography>
+      </Grid>
+      <Grid item xs={8}>
+        <DeleteSharpIcon className={classes.icon} />
+        <DeleteForeverSharpIcon className={classes.icon} />
+      </Grid>
+      <Grid item xs={4}>
+        <Typography>Edge-cases</Typography>
+      </Grid>
+      <Grid item xs={8}>
+        <ThreeDRotationIcon className={classes.icon} />
+        <FourKIcon className={classes.icon} />
+        <ThreeSixtyIcon className={classes.icon} />
+      </Grid>
+    </Grid>
   );
 }
 

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

@@ -33,19 +33,27 @@ Optionally, you can set the icon color using one of the theme color properties:
 It's interesting to have the building blocks needed to implement custom icons, but what about presets?
 We provide a separate NPM package,
 [@material-ui/icons](https://www.npmjs.com/package/@material-ui/icons),
-that includes the 900+ official [Material icons](https://material.io/tools/icons/?style=baseline) converted to `SvgIcon` components.
+that includes the 1,000+ official [Material icons](https://material.io/tools/icons/?style=baseline) converted to `SvgIcon` components.
 
 <a href="https://material.io/tools/icons/?icon=3d_rotation&style=baseline">
-  <img src="/static/images/icons/icons.png" style="width: 644px" />
+  <img src="/static/images/icons/icons.png" style="width: 566px" />
 </a>
 
 You can use [material.io/tools/icons](https://material.io/tools/icons/?style=baseline) to find a specific icon.
 When importing an icon, keep in mind that the names of the icons are `PascalCase`, for instance:
-- [`alarm`](https://material.io/tools/icons/?icon=alarm&style=baseline) is exposed as `@material-ui/icons/Alarm`
-- [`alarm off`](https://material.io/tools/icons/?icon=alarm_off&style=baseline) is exposed as `@material-ui/icons/AlarmOff`
-
-There is one exception to this rule:
-- [`3d_rotation`](https://material.io/tools/icons/?icon=3d_rotation&style=baseline) is exposed as `@material-ui/icons/ThreeDRotation`.
+- [`delete`](https://material.io/tools/icons/?icon=delete&style=baseline) is exposed as `@material-ui/icons/Delete`
+- [`delete forever`](https://material.io/tools/icons/?icon=delete_forever&style=baseline) is exposed as `@material-ui/icons/DeleteForever`
+
+For *"themed"* icons, append the theme name to the icon name. For instance with the
+- The Outlined [`delete`](https://material.io/tools/icons/?icon=delete&style=outline) icon is exposed as `@material-ui/icons/BuildOutlined`
+- The Rounded [`delete`](https://material.io/tools/icons/?icon=delete&style=rounded) icon is exposed as `@material-ui/icons/BuildRounded`
+- The Two Tone [`delete`](https://material.io/tools/icons/?icon=delete&style=twotone) icon is exposed as `@material-ui/icons/BuildTwoTone`
+- The Sharp [`delete`](https://material.io/tools/icons/?icon=delete&style=sharp) icon is exposed as `@material-ui/icons/BuildSharp`
+
+There are three exceptions to this rule:
+- [`3d_rotation`](https://material.io/tools/icons/?icon=3d_rotation&style=baseline) is exposed as `@material-ui/icons/ThreeDRotation`
+- [`4k`](https://material.io/tools/icons/?icon=4k&style=baseline) is exposed as `@material-ui/icons/FourK`
+- [`360`](https://material.io/tools/icons/?icon=360&style=baseline) is exposed as `@material-ui/icons/ThreeSixty`
 
 {{"demo": "pages/style/icons/SvgMaterialIcons.js"}}
 

packages/material-ui-docs/package.json

@@ -31,7 +31,6 @@
   },
   "peerDependencies": {
     "@material-ui/core": "^1.0.0",
-    "@material-ui/icons": "^1.0.0",
     "react": "^16.3.0",
     "react-dom": "^16.3.0"
   },

packages/material-ui-docs/src/svgIcons/FileDownload.js

@@ -0,0 +1,16 @@
+/* eslint-disable max-len */
+
+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+function FileDownload(props) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" />
+    </SvgIcon>
+  );
+}
+
+FileDownload.muiName = 'SvgIcon';
+
+export default FileDownload;

packages/material-ui-docs/src/svgIcons/LightbublFull.js → packages/material-ui-docs/src/svgIcons/LightbulbFull.js

@@ -3,14 +3,14 @@
 import React from 'react';
 import SvgIcon from '@material-ui/core/SvgIcon';
 
-function LightbublFull(props) {
+function LightbulbFull(props) {
   return (
     <SvgIcon {...props}>
       <path d="m9,21c0,0.55 0.45,1 1,1l4,0c0.55,0 1,-0.45 1,-1l0,-1l-6,0l0,1zm3,-19c-3.86,0 -7,3.14 -7,7c0,2.38 1.19,4.47 3,5.74l0,2.26c0,0.55 0.45,1 1,1l6,0c0.55,0 1,-0.45 1,-1l0,-2.26c1.81,-1.27 3,-3.36 3,-5.74c0,-3.86 -3.14,-7 -7,-7z" />
     </SvgIcon>
   );
 }
 
-LightbublFull.muiName = 'SvgIcon';
+LightbulbFull.muiName = 'SvgIcon';
 
-export default LightbublFull;
+export default LightbulbFull;

packages/material-ui-docs/src/svgIcons/LightbulbOutline.js

@@ -0,0 +1,16 @@
+/* eslint-disable max-len */
+
+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+function LightbulbOutline(props) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" />
+    </SvgIcon>
+  );
+}
+
+LightbulbOutline.muiName = 'SvgIcon';
+
+export default LightbulbOutline;

packages/material-ui-icons/README.md

@@ -1,6 +1,6 @@
 # @material-ui/icons
 
-This package provides the Google [Material icons](https://material.io/icons/) packaged as a set of [React](https://facebook.github.io/react/) components.
+This package provides the Google [Material icons](https://material.io/tools/icons/) packaged as a set of [React](https://facebook.github.io/react/) components.
 
 ## Installation
 
@@ -25,11 +25,15 @@ yarn add @material-ui/core
 
 ## Usage
 
-The import path for each Material icon component includes the icon name in PascalCase. There are two versions provided: filled icon and outline icon. Append `Outline` to the icon name to use the outlined version of the icon (i.e., `@material-ui/icons/InfoOutline`) when available, as not all icons are provided with two versions.
+The import path for each Material icon component includes the icon name in PascalCase.
 
 For example to use the 'access alarm' icon component, import `@material-ui/icons/AccessAlarm`.
+For "themed" icons, append the theme name to the icon name, for example `AccessAlarmOutlined`.
 
-Note: One exception is '3d rotation', which is named `ThreeDRotation`.
+Note, there are three exceptions:
+- '3d rotation' is named `ThreeDRotation`
+- '4k' is named `FourK`
+- '360' is named `ThreeSixty`
 
 ### Examples