[docs] Use material-ui-icons package (#6390)

* [docs] Use material-ui-icons package, remove unneeded svg-icons * [docs] Replace font-icon with SvgIcons in IconButton * [docs] Replace Icon with material-ui-icons * [docs] Update style/icons docs * [Avatar] Fix failing test
mui · Mar 20, 2017 · 4111f8f · 4111f8f
1 parent 369813c
commit 4111f8f
Show file tree

Hide file tree

Showing 58 changed files with 171 additions and 491 deletions.
diff --git a/docs/site/package.json b/docs/site/package.json
@@ -35,6 +35,7 @@
   },
   "dependencies": {
     "marked": "^0.3.6",
+    "material-ui-icons": "^1.0.0-alpha.2",
     "prismjs": "^1.6.0",
     "react-redux": "^5.0.3",
     "react-router": "^3.0.2",

diff --git a/docs/site/src/components/AppFrame.js b/docs/site/src/components/AppFrame.js
@@ -9,8 +9,8 @@ import AppBar from 'material-ui/AppBar';
 import Toolbar from 'material-ui/Toolbar';
 import IconButton from 'material-ui/IconButton';
 import withWidth, { isWidthUp } from 'material-ui/utils/withWidth';
-import MenuIcon from 'material-ui/svg-icons/menu';
-import LightbulbOutlineIcon from 'material-ui/svg-icons/lightbulb-outline';
+import MenuIcon from 'material-ui-icons/Menu';
+import LightbulbOutlineIcon from 'material-ui-icons/LightbulbOutline';
 import customPropTypes from 'material-ui/utils/customPropTypes';
 import AppDrawer from './AppDrawer';
 

diff --git a/docs/site/src/components/Demo.js b/docs/site/src/components/Demo.js
@@ -6,7 +6,7 @@ import shallowEqual from 'recompose/shallowEqual';
 import customPropTypes from 'material-ui/utils/customPropTypes';
 import IconButton from 'material-ui/IconButton';
 import Collapse from 'material-ui/transitions/Collapse';
-import CodeIcon from 'material-ui/svg-icons/code';
+import CodeIcon from 'material-ui-icons/Code';
 import MarkdownElement from 'docs/site/src/components/MarkdownElement';
 
 const requireDemos = require.context('docs/site/src', true, /\.js$/);

diff --git a/docs/site/src/demos/app-bar/ButtonAppBar.js b/docs/site/src/demos/app-bar/ButtonAppBar.js
@@ -8,7 +8,7 @@ import Toolbar from 'material-ui/Toolbar';
 import Text from 'material-ui/Text';
 import Button from 'material-ui/Button';
 import IconButton from 'material-ui/IconButton';
-import MenuIcon from 'material-ui/svg-icons/menu';
+import MenuIcon from 'material-ui-icons/Menu';
 
 const styleSheet = createStyleSheet('ButtonAppBar', () => ({
   root: {

diff --git a/docs/site/src/demos/avatars/IconAvatars.js b/docs/site/src/demos/avatars/IconAvatars.js
@@ -5,9 +5,9 @@ import { createStyleSheet } from 'jss-theme-reactor';
 import Avatar from 'material-ui/Avatar';
 import customPropTypes from 'material-ui/utils/customPropTypes';
 import { pink, green } from 'material-ui/styles/colors';
-import FolderIcon from 'material-ui/svg-icons/folder';
-import PageviewIcon from 'material-ui/svg-icons/pageview';
-import AssignmentIcon from 'material-ui/svg-icons/assignment';
+import FolderIcon from 'material-ui-icons/Folder';
+import PageviewIcon from 'material-ui-icons/Pageview';
+import AssignmentIcon from 'material-ui-icons/Assignment';
 
 const styleSheet = createStyleSheet('IconAvatars', () => ({
   avatar: {

diff --git a/docs/site/src/demos/badges/SimpleBadge.js b/docs/site/src/demos/badges/SimpleBadge.js
@@ -4,7 +4,8 @@ import React from 'react';
 import { createStyleSheet } from 'jss-theme-reactor';
 import customPropTypes from 'material-ui/utils/customPropTypes';
 import Badge from 'material-ui/Badge';
-import Icon from 'material-ui/Icon';
+import MailIcon from 'material-ui-icons/Mail';
+import FolderIcon from 'material-ui-icons/Folder';
 
 const styleSheet = createStyleSheet('SimpleBadge', (theme) => ({
   badge: {
@@ -21,14 +22,14 @@ export default function SimpleBadge(props, context) {
         badgeContent={4}
         primary
       >
-        <Icon>mail</Icon>
+        <MailIcon />
       </Badge>
       <Badge
         className={classes.badge}
         badgeContent={10}
         accent
       >
-        <Icon>folder</Icon>
+        <FolderIcon />
       </Badge>
     </div>
   );

diff --git a/docs/site/src/demos/bottom-navigation/LabelBottomNavigation.js b/docs/site/src/demos/bottom-navigation/LabelBottomNavigation.js
@@ -4,10 +4,10 @@ import React, { Component } from 'react';
 import { createStyleSheet } from 'jss-theme-reactor';
 import customPropTypes from 'material-ui/utils/customPropTypes';
 import { BottomNavigation, BottomNavigationButton } from 'material-ui/BottomNavigation';
-import RestoreIcon from 'material-ui/svg-icons/restore';
-import FavoriteIcon from 'material-ui/svg-icons/favorite';
-import LocationOnIcon from 'material-ui/svg-icons/location-on';
-import FolderIcon from 'material-ui/svg-icons/folder';
+import RestoreIcon from 'material-ui-icons/Restore';
+import FavoriteIcon from 'material-ui-icons/Favorite';
+import LocationOnIcon from 'material-ui-icons/LocationOn';
+import FolderIcon from 'material-ui-icons/Folder';
 
 const styleSheet = createStyleSheet('LabelBottomNavigation', () => ({
   root: {

diff --git a/docs/site/src/demos/bottom-navigation/SimpleBottomNavigation.js b/docs/site/src/demos/bottom-navigation/SimpleBottomNavigation.js
@@ -4,9 +4,9 @@ import React, { Component } from 'react';
 import { createStyleSheet } from 'jss-theme-reactor';
 import customPropTypes from 'material-ui/utils/customPropTypes';
 import { BottomNavigation, BottomNavigationButton } from 'material-ui/BottomNavigation';
-import RestoreIcon from 'material-ui/svg-icons/restore';
-import FavoriteIcon from 'material-ui/svg-icons/favorite';
-import LocationOnIcon from 'material-ui/svg-icons/location-on';
+import RestoreIcon from 'material-ui-icons/Restore';
+import FavoriteIcon from 'material-ui-icons/Favorite';
+import LocationOnIcon from 'material-ui-icons/LocationOn';
 
 const styleSheet = createStyleSheet('SimpleBottomNavigation', () => ({
   root: {

diff --git a/docs/site/src/demos/buttons/FloatingActionButtons.js b/docs/site/src/demos/buttons/FloatingActionButtons.js
@@ -4,8 +4,8 @@ import React from 'react';
 import { createStyleSheet } from 'jss-theme-reactor';
 import customPropTypes from 'material-ui/utils/customPropTypes';
 import Button from 'material-ui/Button';
-import AddIcon from 'material-ui/svg-icons/add';
-import ModeEditIcon from 'material-ui/svg-icons/mode-edit';
+import AddIcon from 'material-ui-icons/Add';
+import ModeEditIcon from 'material-ui-icons/ModeEdit';
 
 const styleSheet = createStyleSheet('FloatingActionButtons', (theme) => ({
   button: {

diff --git a/docs/site/src/demos/buttons/IconButtons.js b/docs/site/src/demos/buttons/IconButtons.js
@@ -4,7 +4,9 @@ import React from 'react';
 import { createStyleSheet } from 'jss-theme-reactor';
 import customPropTypes from 'material-ui/utils/customPropTypes';
 import IconButton from 'material-ui/IconButton';
-import Icon from 'material-ui/Icon';
+import DeleteIcon from 'material-ui-icons/Delete';
+import AlarmIcon from 'material-ui-icons/Alarm';
+import AddShoppingCartIcon from 'material-ui-icons/AddShoppingCart';
 
 const styleSheet = createStyleSheet('IconButtons', (theme) => ({
   button: {
@@ -17,16 +19,16 @@ export default function IconButtons(props, context) {
   return (
     <div>
       <IconButton className={classes.button}>
-        delete
+        <DeleteIcon />
       </IconButton>
       <IconButton className={classes.button} disabled>
-        delete
+        <DeleteIcon />
       </IconButton>
       <IconButton accent className={classes.button}>
-        <Icon>alarm</Icon>
+        <AlarmIcon />
       </IconButton>
       <IconButton contrast className={classes.button}>
-        add_shopping_cart
+        <AddShoppingCartIcon />
       </IconButton>
     </div>
   );

diff --git a/docs/site/src/demos/cards/NowPlayingCard.js b/docs/site/src/demos/cards/NowPlayingCard.js
@@ -9,6 +9,9 @@ import {
 } from 'material-ui/Card';
 import IconButton from 'material-ui/IconButton';
 import Text from 'material-ui/Text';
+import SkipPreviousIcon from 'material-ui-icons/SkipPrevious';
+import PlayArrowIcon from 'material-ui-icons/PlayArrow';
+import SkipNextIcon from 'material-ui-icons/SkipNext';
 import albumCover from 'docs/site/assets/images/live-from-space.jpg';
 
 const styleSheet = createStyleSheet('NowPlayingCard', () => ({
@@ -33,7 +36,8 @@ const styleSheet = createStyleSheet('NowPlayingCard', () => ({
     paddingBottom: 8,
   },
   playIcon: {
-    fontSize: 38,
+    height: 38,
+    width: 38,
   },
 }));
 
@@ -51,9 +55,15 @@ export default function NowPlayingCard(props, context) {
             </Text>
           </CardContent>
           <div className={classes.controls}>
-            <IconButton>skip_previous</IconButton>
-            <IconButton iconClassName={classes.playIcon}>play_arrow</IconButton>
-            <IconButton>skip_next</IconButton>
+            <IconButton>
+              <SkipPreviousIcon />
+            </IconButton>
+            <IconButton>
+              <PlayArrowIcon className={classes.playIcon} />
+            </IconButton>
+            <IconButton>
+              <SkipNextIcon />
+            </IconButton>
           </div>
         </div>
         <div className={classes.cover}>

diff --git a/docs/site/src/demos/cards/RecipeReviewCard.js b/docs/site/src/demos/cards/RecipeReviewCard.js
@@ -16,6 +16,9 @@ import Avatar from 'material-ui/Avatar';
 import IconButton from 'material-ui/IconButton';
 import Text from 'material-ui/Text';
 import { red } from 'material-ui/styles/colors';
+import FavoriteIcon from 'material-ui-icons/Favorite';
+import ShareIcon from 'material-ui-icons/Share';
+import ExpandMoreIcon from 'material-ui-icons/ExpandMore';
 import paellaImage from 'docs/site/assets/images/[email protected]';
 
 const styleSheet = createStyleSheet('RecipeReviewCard', (theme) => ({
@@ -64,16 +67,20 @@ export default class RecipeReviewCard extends Component {
             </Text>
           </CardContent>
           <CardActions actionSpacing={false}>
-            <IconButton>favorite</IconButton>
-            <IconButton>share</IconButton>
+            <IconButton>
+              <FavoriteIcon />
+            </IconButton>
+            <IconButton>
+              <ShareIcon />
+            </IconButton>
             <div className={classes.flexGrow} />
             <IconButton
               className={classnames(classes.expand, {
                 [classes.expandOpen]: this.state.expanded,
               })}
               onClick={this.handleExpandClick}
             >
-              expand_more
+              <ExpandMoreIcon />
             </IconButton>
           </CardActions>
           <Collapse in={this.state.expanded} transitionDuration="auto" unmountOnExit>

diff --git a/docs/site/src/demos/chips/Chips.js b/docs/site/src/demos/chips/Chips.js
@@ -5,7 +5,7 @@ import { createStyleSheet } from 'jss-theme-reactor';
 import customPropTypes from 'material-ui/utils/customPropTypes';
 import Avatar from 'material-ui/Avatar';
 import Chip from 'material-ui/Chip';
-import Face from 'material-ui/svg-icons/face';
+import FaceIcon from 'material-ui-icons/Face';
 import { grey } from 'material-ui/styles/colors';
 import avatarImage from 'docs/site/assets/images/uxceo-128.jpg';
 
@@ -52,7 +52,7 @@ export default function Chips(props, context) {
         className={classes.chip}
       />
       <Chip
-        avatar={<Avatar><Face className={classes.svgIcon} /></Avatar>}
+        avatar={<Avatar><FaceIcon className={classes.svgIcon} /></Avatar>}
         label="Clickable Deletable Chip"
         onClick={handleClick}
         onRequestDelete={handleRequestDelete}

diff --git a/docs/site/src/demos/dialogs/FullScreenDialog.js b/docs/site/src/demos/dialogs/FullScreenDialog.js
@@ -15,7 +15,7 @@ import AppBar from 'material-ui/AppBar';
 import Toolbar from 'material-ui/Toolbar';
 import IconButton from 'material-ui/IconButton';
 import Text from 'material-ui/Text';
-import CloseIcon from 'material-ui/svg-icons/close';
+import CloseIcon from 'material-ui-icons/Close';
 import Slide from 'material-ui/transitions/Slide';
 
 const styleSheet = createStyleSheet('FullScreenDialog', () => ({

diff --git a/docs/site/src/demos/dividers/InsetDividers.js b/docs/site/src/demos/dividers/InsetDividers.js
@@ -10,8 +10,8 @@ import {
 } from 'material-ui/List';
 import Avatar from 'material-ui/Avatar';
 import Divider from 'material-ui/Divider';
-import FolderIcon from 'material-ui/svg-icons/folder';
-import ImageIcon from 'material-ui/svg-icons/image';
+import FolderIcon from 'material-ui-icons/Folder';
+import ImageIcon from 'material-ui-icons/Image';
 
 const styleSheet = createStyleSheet('InsetDividers', (theme) => ({
   root: {

diff --git a/docs/site/src/demos/drawers/UndockedDrawer.js b/docs/site/src/demos/drawers/UndockedDrawer.js
@@ -12,13 +12,13 @@ import {
   ListItemIcon,
 } from 'material-ui/List';
 import Divider from 'material-ui/Divider';
-import InboxIcon from 'material-ui/svg-icons/inbox';
-import DraftsIcon from 'material-ui/svg-icons/drafts';
-import StarIcon from 'material-ui/svg-icons/star';
-import SendIcon from 'material-ui/svg-icons/send';
-import MailIcon from 'material-ui/svg-icons/mail';
-import DeleteIcon from 'material-ui/svg-icons/delete';
-import ReportIcon from 'material-ui/svg-icons/report';
+import InboxIcon from 'material-ui-icons/Inbox';
+import DraftsIcon from 'material-ui-icons/Drafts';
+import StarIcon from 'material-ui-icons/Star';
+import SendIcon from 'material-ui-icons/Send';
+import MailIcon from 'material-ui-icons/Mail';
+import DeleteIcon from 'material-ui-icons/Delete';
+import ReportIcon from 'material-ui-icons/Report';
 
 
 const styleSheet = createStyleSheet('UndockedDrawer', () => ({

diff --git a/docs/site/src/demos/lists/CheckboxList.js b/docs/site/src/demos/lists/CheckboxList.js
@@ -11,6 +11,7 @@ import {
 } from 'material-ui/List';
 import Checkbox from 'material-ui/Checkbox';
 import IconButton from 'material-ui/IconButton';
+import CommentIcon from 'material-ui-icons/Comment';
 
 const styleSheet = createStyleSheet('CheckboxList', (theme) => ({
   root: {
@@ -65,7 +66,9 @@ export default class CheckboxList extends Component {
               />
               <ListItemText primary={`Line item ${index + 1}`} />
               <ListItemSecondaryAction>
-                <IconButton>comment</IconButton>
+                <IconButton>
+                  <CommentIcon />
+                </IconButton>
               </ListItemSecondaryAction>
             </ListItem>
           ))}

diff --git a/docs/site/src/demos/lists/FolderList.js b/docs/site/src/demos/lists/FolderList.js
@@ -9,7 +9,7 @@ import {
   ListItemText,
 } from 'material-ui/List';
 import Avatar from 'material-ui/Avatar';
-import FolderIcon from 'material-ui/svg-icons/folder';
+import FolderIcon from 'material-ui-icons/Folder';
 
 const styleSheet = createStyleSheet('FolderList', (theme) => ({
   root: {

diff --git a/docs/site/src/demos/lists/InsetList.js b/docs/site/src/demos/lists/InsetList.js
@@ -9,7 +9,7 @@ import {
   ListItemText,
   ListItemIcon,
 } from 'material-ui/List';
-import StarIcon from 'material-ui/svg-icons/star';
+import StarIcon from 'material-ui-icons/Star';
 
 const styleSheet = createStyleSheet('InsetList', (theme) => ({
   root: {

diff --git a/docs/site/src/demos/lists/InteractiveList.js b/docs/site/src/demos/lists/InteractiveList.js
@@ -12,12 +12,13 @@ import {
   ListItemText,
 } from 'material-ui/List';
 import Avatar from 'material-ui/Avatar';
-import FolderIcon from 'material-ui/svg-icons/folder';
 import IconButton from 'material-ui/IconButton';
 import { FormGroup } from 'material-ui/Form';
 import { LabelCheckbox } from 'material-ui/Checkbox';
 import Layout from 'material-ui/Layout';
 import Text from 'material-ui/Text';
+import FolderIcon from 'material-ui-icons/Folder';
+import DeleteIcon from 'material-ui-icons/Delete';
 
 const styleSheet = createStyleSheet('InteractiveList', (theme) => ({
   root: {
@@ -96,7 +97,9 @@ class InteractiveList extends Component {
               <List dense={dense}>
                 {generate((
                   <ListItem button>
-                    <ListItemIcon><FolderIcon /></ListItemIcon>
+                    <ListItemIcon>
+                      <FolderIcon />
+                    </ListItemIcon>
                     <ListItemText
                       primary="Single-line item"
                       secondary={secondary ? 'Secondary text' : null}
@@ -116,10 +119,14 @@ class InteractiveList extends Component {
                   <ListItem button>
                     {dense ? (
                       <ListItemAvatar>
-                        <Avatar><FolderIcon /></Avatar>
+                        <Avatar>
+                          <FolderIcon />
+                        </Avatar>
                       </ListItemAvatar>
                     ) : (
-                      <Avatar><FolderIcon /></Avatar>
+                      <Avatar>
+                        <FolderIcon />
+                      </Avatar>
                     )}
                     <ListItemText
                       primary="Single-line item"
@@ -140,17 +147,23 @@ class InteractiveList extends Component {
                   <ListItem button>
                     {dense ? (
                       <ListItemAvatar>
-                        <Avatar><FolderIcon /></Avatar>
+                        <Avatar>
+                          <FolderIcon />
+                        </Avatar>
                       </ListItemAvatar>
                     ) : (
-                      <Avatar><FolderIcon /></Avatar>
+                      <Avatar>
+                        <FolderIcon />
+                      </Avatar>
                     )}
                     <ListItemText
                       primary="Single-line item"
                       secondary={secondary ? 'Secondary text' : null}
                     />
                     <ListItemSecondaryAction>
-                      <IconButton>comment</IconButton>
+                      <IconButton>
+                        <DeleteIcon />
+                      </IconButton>
                     </ListItemSecondaryAction>
                   </ListItem>
                 ))}

diff --git a/docs/site/src/demos/lists/SimpleList.js b/docs/site/src/demos/lists/SimpleList.js
@@ -10,8 +10,8 @@ import {
   ListItemIcon,
 } from 'material-ui/List';
 import Divider from 'material-ui/Divider';
-import InboxIcon from 'material-ui/svg-icons/inbox';
-import DraftsIcon from 'material-ui/svg-icons/drafts';
+import InboxIcon from 'material-ui-icons/Inbox';
+import DraftsIcon from 'material-ui-icons/Drafts';
 
 const styleSheet = createStyleSheet('SimpleList', (theme) => ({
   root: {