Add <FilterListItem icon> prop to show an icon for each filter list item

docs/FilterList.md

@@ -275,6 +275,7 @@ The children of `<FilterList>` must be a list of `<FilterListItem>` components.
 |------|----------|------|---------|-------------|
 | `label` | Required | string | | The label of the filter item. It is passed through the `useTranslate` hook, and therefore can be translated. |
 | `value` | Required | object | | The value of the filter item. It is merged with the current filter value when enabled by the user. |
+| `icon` | Optional | `ReactElement` | | When set, the icon appears to the left of the item label.  |
 | `isSelected` | Optional | function | | A function that receives the item value and the currently applied filters. It must return a boolean. |
 | `toggleFilter` | Optional | function | | A function that receives the item value and the currently applied filters. It is called when user toggles a filter and must return the new filters to apply. |
 

packages/ra-ui-materialui/src/list/filter/FilterList.stories.tsx

@@ -9,6 +9,10 @@ import fakeRestDataProvider from 'ra-data-fakerest';
 import { Box, Typography, Card, CardContent } from '@mui/material';
 import MailIcon from '@mui/icons-material/MailOutline';
 import CategoryIcon from '@mui/icons-material/LocalOffer';
+import BiotechIcon from '@mui/icons-material/Biotech';
+import NewspaperIcon from '@mui/icons-material/Newspaper';
+import LocalOfferIcon from '@mui/icons-material/LocalOffer';
+import HelpCenterIcon from '@mui/icons-material/HelpCenter';
 
 import { FilterList } from './FilterList';
 import { FilterListItem } from './FilterListItem';
@@ -56,18 +60,22 @@ export const Basic = () => {
                         <FilterListItem
                             label="Tests"
                             value={{ category: 'tests' }}
+                            icon={<BiotechIcon />}
                         />
                         <FilterListItem
                             label="News"
                             value={{ category: 'news' }}
+                            icon={<NewspaperIcon />}
                         />
                         <FilterListItem
                             label="Deals"
                             value={{ category: 'deals' }}
+                            icon={<LocalOfferIcon />}
                         />
                         <FilterListItem
                             label="Tutorials"
                             value={{ category: 'tutorials' }}
+                            icon={<HelpCenterIcon />}
                         />
                     </FilterList>
                 </CardContent>

packages/ra-ui-materialui/src/list/filter/FilterListItem.spec.tsx

@@ -3,6 +3,7 @@ import expect from 'expect';
 import { render, screen } from '@testing-library/react';
 
 import { ListContextProvider, ListControllerResult } from 'ra-core';
+import GoogleIcon from '@mui/icons-material/Google';
 import { FilterListItem } from './FilterListItem';
 import { Cumulative } from './FilterList.stories';
 
@@ -54,6 +55,19 @@ describe('<FilterListItem/>', () => {
         expect(screen.queryByTestId('123')).not.toBeNull();
     });
 
+    it("should display the item icon if it's provided", () => {
+        render(
+            <ListContextProvider value={defaultListContext}>
+                <FilterListItem
+                    label="Foo"
+                    value={{ foo: 'bar' }}
+                    icon={<GoogleIcon />}
+                />
+            </ListContextProvider>
+        );
+        expect(screen.queryByTestId('GoogleIcon')).not.toBeNull();
+    });
+
     it('should not appear selected if filterValues is empty', () => {
         render(
             <ListContextProvider value={defaultListContext}>

packages/ra-ui-materialui/src/list/filter/FilterListItem.tsx

@@ -6,6 +6,7 @@ import {
     IconButton,
     ListItem,
     ListItemButton,
+    ListItemIcon,
     ListItemProps,
     ListItemText,
     ListItemSecondaryAction,
@@ -150,6 +151,7 @@ export const FilterListItem = memo((props: FilterListItemProps) => {
     const {
         label,
         value,
+        icon,
         isSelected: getIsSelected = DefaultIsSelected,
         toggleFilter: userToggleFilter = DefaultToggleFilter,
         ...rest
@@ -175,6 +177,13 @@ export const FilterListItem = memo((props: FilterListItemProps) => {
                 disableGutters
                 className={FilterListItemClasses.listItemButton}
             >
+                {icon && (
+                    <ListItemIcon
+                        className={FilterListItemClasses.listItemIcon}
+                    >
+                        {icon}
+                    </ListItemIcon>
+                )}
                 <ListItemText
                     primary={
                         isElement(label)
@@ -228,6 +237,7 @@ const PREFIX = 'RaFilterListItem';
 export const FilterListItemClasses = {
     listItemButton: `${PREFIX}-listItemButton`,
     listItemText: `${PREFIX}-listItemText`,
+    listItemIcon: `${PREFIX}-listItemIcon`,
 };
 
 const StyledListItem = styled(ListItem, {
@@ -241,11 +251,16 @@ const StyledListItem = styled(ListItem, {
     [`& .${FilterListItemClasses.listItemText}`]: {
         margin: 0,
     },
+    [`& .${FilterListItemClasses.listItemIcon}`]: {
+        minWidth: 0,
+        marginRight: '1em',
+    },
 });
 
 export interface FilterListItemProps extends Omit<ListItemProps, 'value'> {
     label: string | ReactElement;
     value: any;
+    icon?: ReactElement;
     toggleFilter?: (value: any, filters: any) => any;
     isSelected?: (value: any, filters: any) => boolean;
 }