make the remove icon of the file preview configurable and default to RemoveCircle

docs/FileInput.md

@@ -62,6 +62,7 @@ Files are accepted or rejected based on the `accept`, `multiple`, `minSize` and
 | `multiple`             | Optional | `boolean`           | `false`    | Whether the inputs can accept multiple files.                       |
 | `options`              | Optional | `Object`            | `{}`       | Additional options passed to react-dropzone's `useDropzone()` hook. |
 | `placeholder`          | Optional | `ReactNode`         | -          | Invite displayed in the drop zone                                   |
+| `removeIcon`           | Optional | `ReactNode`         | -          | The clickable icon for removing images                              |
 | `validateFile Removal` | Optional | `function`          | -          | Allows to cancel the removal of files                               |
 
 `<FileInput>` also accepts the [common input props](./Inputs.md#common-input-props).
@@ -152,6 +153,10 @@ If that's not enough, you can pass a `placeholder` prop to overwrite it. The val
 </FileInput>
 ```
 
+## `removeIcon`
+
+Optionally overwrite the [default icon](https://mui.com/material-ui/material-icons/?query=removeCir&selected=RemoveCircle) for removing files.
+
 ## `sx`: CSS API
 
 The `<FileInput>` component accepts the usual `className` prop. You can also override many styles of the inner components thanks to the `sx` property (as most MUI components, see their [documentation about it](https://mui.com/customization/how-to-customize/#overriding-nested-component-styles)). This property accepts the following subclasses:

docs/ImageInput.md

@@ -53,13 +53,14 @@ Files are accepted or rejected based on the `accept`, `multiple`, `minSize` and
 
 | Prop                   | Required | Type                | Default    | Description                                                         |
 |------------------------|----------|---------------------|------------|---------------------------------------------------------------------|
-| `accept`               | Optional | `string | string[]` | -          | Accepted file type(s). When empty, all file types are accepted.     |
+| `accept`               | Optional | `string | string[]` | -                                                                   | Accepted file type(s). When empty, all file types are accepted.     |
 | `children`             | Optional | `ReactNode`         | -          | Element used to preview file(s)                                     |
 | `minSize`              | Optional | `number`            | 0          | Minimum file size (in bytes), e.g. 5000 for 5KB                     |
 | `maxSize`              | Optional | `number`            | `Infinity` | Maximum file size (in bytes), e.g. 5000000 for 5MB                  |
 | `multiple`             | Optional | `boolean`           | `false`    | Whether the inputs can accept multiple files.                       |
 | `options`              | Optional | `Object`            | `{}`       | Additional options passed to react-dropzone's `useDropzone()` hook. |
 | `placeholder`          | Optional | `ReactNode`         | -          | Invite displayed in the drop zone                                   |
+| `removeIcon`           | Optional | `ReactNode`         | -          | The clickable icon for removing images                              |
 | `validateFile Removal` | Optional | `function`          | -          | Allows to cancel the removal of files                               |
 
 `<ImageInput>` also accepts the [common input props](./Inputs.md#common-input-props).
@@ -149,6 +150,10 @@ If that's not enough, you can pass a `placeholder` prop to overwrite it. The val
 </ImageInput>
 ```
 
+## `removeIcon`
+
+Optionally overwrite the [default icon](https://mui.com/material-ui/material-icons/?query=removeCir&selected=RemoveCircle) for removing images.
+
 ## `sx`: CSS API
 
 The `<ImageInput>` component accepts the usual `className` prop. You can also override many styles of the inner components thanks to the `sx` property (as most MUI components, see their [documentation about it](https://mui.com/customization/how-to-customize/#overriding-nested-component-styles)). This property accepts the following subclasses:

packages/ra-ui-materialui/src/input/FileInput.tsx

@@ -22,6 +22,7 @@ import { FileInputPreview } from './FileInputPreview';
 import { sanitizeInputRestProps } from './sanitizeInputRestProps';
 import { InputHelperText } from './InputHelperText';
 import { SxProps } from '@mui/system';
+import { SvgIconProps } from '@mui/material';
 
 export const FileInput = (props: FileInputProps) => {
     const {
@@ -41,6 +42,7 @@ export const FileInput = (props: FileInputProps) => {
         onRemove: onRemoveProp,
         parse,
         placeholder,
+        removeIcon,
         resource,
         source,
         validate,
@@ -192,6 +194,7 @@ export const FileInput = (props: FileInputProps) => {
                                 file={file}
                                 onRemove={onRemove(file)}
                                 className={FileInputClasses.removeButton}
+                                removeIcon={removeIcon}
                             >
                                 <RecordContextProvider value={file}>
                                     {childrenElement}
@@ -223,6 +226,7 @@ FileInput.propTypes = {
     multiple: PropTypes.bool,
     validateFileRemoval: PropTypes.func,
     options: PropTypes.object,
+    removeIcon: PropTypes.element,
     resource: PropTypes.string,
     source: PropTypes.string,
     placeholder: PropTypes.node,
@@ -264,6 +268,7 @@ export type FileInputProps = CommonInputProps & {
     options?: DropzoneOptions;
     onRemove?: Function;
     placeholder?: ReactNode;
+    removeIcon?: React.ReactElement<SvgIconProps>;
     inputProps?: any;
     validateFileRemoval?(file): boolean | Promise<boolean>;
     sx?: SxProps;

packages/ra-ui-materialui/src/input/FileInputPreview.tsx

@@ -1,13 +1,21 @@
 import * as React from 'react';
+import { ReactNode, useEffect } from 'react';
 import { styled } from '@mui/material/styles';
-import { useEffect, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import RemoveCircle from '@mui/icons-material/RemoveCircle';
 import IconButton from '@mui/material/IconButton';
 import { useTranslate } from 'ra-core';
+import { SvgIconProps } from '@mui/material';
 
 export const FileInputPreview = (props: FileInputPreviewProps) => {
-    const { children, className, onRemove, file, ...rest } = props;
+    const {
+        children,
+        className,
+        onRemove,
+        file,
+        removeIcon = RemoveCircle,
+        ...rest
+    } = props;
 
     const translate = useTranslate();
 
@@ -30,7 +38,7 @@ export const FileInputPreview = (props: FileInputPreviewProps) => {
                 title={translate('ra.action.delete')}
                 size="small"
             >
-                <RemoveCircle className={FileInputPreviewClasses.removeIcon} />
+                {removeIcon}
             </IconButton>
             {children}
         </Root>
@@ -42,6 +50,7 @@ FileInputPreview.propTypes = {
     className: PropTypes.string,
     file: PropTypes.object,
     onRemove: PropTypes.func.isRequired,
+    removeIcon: PropTypes.element,
 };
 
 FileInputPreview.defaultProps = {
@@ -71,4 +80,5 @@ export interface FileInputPreviewProps {
     className?: string;
     onRemove: () => void;
     file: any;
+    removeIcon?: React.ReactElement<SvgIconProps>;
 }