[RFR] Custom User Menu icon

docs/Theming.md

@@ -386,9 +386,11 @@ const MyLayout = props => <Layout
 export default MyLayout;
 ```
 
+### UserMenu Customization
+
 You can replace the default user menu by your own by setting the `userMenu` prop of the `<AppBar>` component. For instance, to add custom menu items, just decorate the default `<UserMenu>` by adding children to it:
 
-```js
+```jsx
 import { AppBar, UserMenu, MenuItemLink } from 'react-admin';
 import SettingsIcon from '@material-ui/icons/Settings';
 
@@ -407,6 +409,38 @@ const MyAppBar = props => <AppBar {...props} userMenu={<MyUserMenu />} />;
 const MyLayout = props => <Layout {...props} appBar={MyAppBar} />;
 ```
 
+You can also customize the default icon by setting the `icon` prop to the `<UserMenu />` component.
+
+{% raw %}
+``` jsx
+import { AppBar, UserMenu } from 'react-admin';
+import { withStyles } from '@material-ui/core/styles';
+import Avatar from '@material-ui/core/Avatar';
+
+const myCustomIconStyle = {
+    avatar: {
+        height: 30,
+        width: 30,
+    },
+};
+
+const MyCustomIcon = withStyles(myCustomIconStyle)(
+    ({ classes }) => (
+        <Avatar
+            className={classes.avatar}
+            src="https://marmelab.com/images/avatars/adrien.jpg"
+        />
+    )
+);
+
+const MyUserMenu = props => (<UserMenu {...props} icon={<MyCustomIcon />} />);
+
+const MyAppBar = props => <AppBar {...props} userMenu={<MyUserMenu />} />;
+```
+{% endraw %}
+
+### Sidebar Customization
+
 You can specify the `Sidebar` size by setting the `size` property:
 
 ```jsx
@@ -420,6 +454,8 @@ const MyLayout = props => <Layout
 
 ```
 
+### Layout From Scratch
+
 For more custom layouts, write a component from scratch. It must contain a `{children}` placeholder, where react-admin will render the resources. Use the [default layout](https://github.com/marmelab/react-admin/blob/master/src/mui/layout/Layout.js) as a starting point. Here is a simplified version (with no responsive support):
 
 ```jsx

packages/ra-ui-materialui/src/layout/UserMenu.js

@@ -11,11 +11,13 @@ class UserMenu extends React.Component {
         children: PropTypes.node,
         label: PropTypes.string.isRequired,
         logout: PropTypes.node,
+        icon: PropTypes.node,
         translate: PropTypes.func.isRequired,
     };
 
     static defaultProps = {
         label: 'ra.auth.user_menu',
+        icon: <AccountCircle />,
     };
 
     state = {
@@ -36,23 +38,24 @@ class UserMenu extends React.Component {
     };
 
     render() {
-        const { children, label, logout, translate } = this.props;
+        const { children, label, icon, logout, translate } = this.props;
         if (!logout && !children) return null;
         const { anchorEl } = this.state;
         const open = Boolean(anchorEl);
 
+        const menuIconProps = {
+            'arial-label': label && translate(label, { _: label }),
+            'aria-owns': open ? 'menu-appbar' : null,
+            'aria-haspopup': true,
+            color: 'inherit',
+            onClick: this.handleMenu,
+            children: cloneElement(icon),
+        };
+
         return (
             <div>
                 <Tooltip title={label && translate(label, { _: label })}>
-                    <IconButton
-                        arial-label={label && translate(label, { _: label })}
-                        aria-owns={open ? 'menu-appbar' : null}
-                        aria-haspopup="true"
-                        onClick={this.handleMenu}
-                        color="inherit"
-                    >
-                        <AccountCircle />
-                    </IconButton>
+                    <IconButton {...menuIconProps} />
                 </Tooltip>
                 <Menu
                     id="menu-appbar"