[RFR] Add ability to customize icon in Logout button

docs/Reference.md

@@ -54,6 +54,7 @@ title: "Reference"
 * `<Labeled>`
 * [`<Layout>`](./Theming.md#using-a-custom-layout)
 * [`<Loading>`](./Theming.md#Loading)
+* [`<Logout>`](./Theming.md#using-a-custom-logout-button)
 * [`<List>`](./List.md#the-list-component)
 * [`<ListGuesser>`](./List.md#the-listguesser-component)
 * `<ListButton>`

docs/Theming.md

@@ -856,6 +856,25 @@ const App = () => (
 );
 ```
 
+## Using a Custom Logout Button
+
+### Changing the Icon
+
+It is possible to use a completely [custom logout button](./Authentication.md#the-datagrid-component) or you can simply override some properties of the default button. If you want to change the icon, you can use the default `<Logout>` component and pass a different icon as the `icon` prop.
+
+```jsx
+import { Admin, Logout } from 'react-admin';
+import ExitToAppIcon from '@material-ui/icons/ExitToApp'
+
+const MyLogoutButton = props => <Logout {...props} icon={<ExitToAppIcon/>} />;
+
+const App = () => (
+    <Admin logoutButton={MyLogoutButton}>
+        // ...
+    </Admin>
+);
+```
+
 ## Notifications
 
 You can override the notification component, for instance to change the notification duration. It defaults to 4000, i.e. 4 seconds, and you can override it using the `autoHideDuration` prop. For instance, to create a custom Notification component with a 5 seconds default:

packages/ra-ui-materialui/src/auth/Logout.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, FunctionComponent } from 'react';
+import React, { useCallback, FunctionComponent, ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import { ListItemIcon, MenuItem, makeStyles } from '@material-ui/core';
 import { MenuItemProps } from '@material-ui/core/MenuItem';
@@ -11,6 +11,7 @@ import { useTranslate, useLogout } from 'ra-core';
 interface Props {
     className?: string;
     redirectTo?: string;
+    icon?: ReactElement;
 }
 
 const useStyles = makeStyles(
@@ -31,7 +32,7 @@ const useStyles = makeStyles(
 const LogoutWithRef: FunctionComponent<
     Props & MenuItemProps<'li', { button: true }> // HACK: https://github.com/mui-org/material-ui/issues/16245
 > = React.forwardRef(function Logout(props, ref) {
-    const { className, redirectTo, ...rest } = props;
+    const { className, redirectTo, icon, ...rest } = props;
     const classes = useStyles({}); // the empty {} is a temp fix for https://github.com/mui-org/material-ui/issues/15942
     const translate = useTranslate();
     const logout = useLogout();
@@ -48,7 +49,7 @@ const LogoutWithRef: FunctionComponent<
             {...rest}
         >
             <ListItemIcon className={classes.icon}>
-                <ExitIcon />
+                {icon ? icon : <ExitIcon />}
             </ListItemIcon>
             {translate('ra.auth.logout')}
         </MenuItem>
@@ -58,6 +59,7 @@ const LogoutWithRef: FunctionComponent<
 LogoutWithRef.propTypes = {
     className: PropTypes.string,
     redirectTo: PropTypes.string,
+    icon: PropTypes.element,
 };
 
 export default LogoutWithRef;