diff --git a/docs/pages/api/autocomplete.md b/docs/pages/api/autocomplete.md
index 2ecfcdde445366..0315e3a12d303b 100644
--- a/docs/pages/api/autocomplete.md
+++ b/docs/pages/api/autocomplete.md
@@ -29,6 +29,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
| autoSelect | bool | false | If `true`, the selected option becomes the value of the input when the Autocomplete loses focus unless the user chooses a different option or changes the character string in the input. |
| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
| clearOnEscape | bool | false | If `true`, clear all values when the user presses escape and the popup is closed. |
+| closeIcon | node | <CloseIcon fontSize="small" /> | The icon to display in place of the default close icon. |
| debug | bool | false | If `true`, the popup will ignore the blur event if the input if filled. You can inspect the popup markup with your browser tools. Consider this option when you need to customize the component. |
| defaultValue | any | | The default input value. Use when the component is not controlled. |
| disableClearable | bool | false | If `true`, the input can't be cleared. |
@@ -57,6 +58,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
| options | array | [] | Array of options. |
| PaperComponent | elementType | Paper | The component used to render the body of the popup. |
| PopperComponent | elementType | Popper | The component used to position the popup. |
+| popupIcon | node | <ArrowDropDownIcon /> | The icon to display in place of the default popup icon. |
| renderGroup | func | | Render the group.
**Signature:**
`function(option: any) => ReactNode`
*option:* The group to render. |
| renderInput * | func | | Render the input.
**Signature:**
`function(params: object) => ReactNode`
*params:* null |
| renderOption | func | | Render the option, use `getOptionLabel` by default.
**Signature:**
`function(option: any, state: object) => ReactNode`
*option:* The option to render.
*state:* The state of the component. |
diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts
index fb06d7a77a0f60..b018f361ed153c 100644
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts
@@ -41,6 +41,10 @@ export interface AutocompleteProps
AutocompleteClassKey,
'defaultValue' | 'onChange' | 'children'
> {
+ /**
+ * The icon to display in place of the default close icon.
+ */
+ closeIcon?: React.ReactNode;
/**
* If `true`, the input will be disabled.
*/
@@ -74,6 +78,10 @@ export interface AutocompleteProps
* The component used to position the popup.
*/
PopperComponent?: React.ComponentType;
+ /**
+ * The icon to display in place of the default popup icon.
+ */
+ popupIcon?: React.ReactNode;
/**
* Render the group.
*
diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
index d97f69721d1a01..d0b9cb5758f64f 100644
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
@@ -164,6 +164,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
classes,
className,
clearOnEscape = false,
+ closeIcon = ,
debug = false,
defaultValue,
disableClearable = false,
@@ -192,6 +193,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
options = [],
PaperComponent = Paper,
PopperComponent: PopperComponentProp = Popper,
+ popupIcon = ,
renderGroup: renderGroupProp,
renderInput,
renderOption: renderOptionProp,
@@ -302,7 +304,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
[classes.clearIndicatorDirty]: dirty,
})}
>
-
+ {closeIcon}
)}
@@ -315,7 +317,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
[classes.popupIndicatorOpen]: popupOpen,
})}
>
-
+ {popupIcon}
)}
@@ -404,6 +406,10 @@ Autocomplete.propTypes = {
* If `true`, clear all values when the user presses escape and the popup is closed.
*/
clearOnEscape: PropTypes.bool,
+ /**
+ * The icon to display in place of the default close icon.
+ */
+ closeIcon: PropTypes.node,
/**
* If `true`, the popup will ignore the blur event if the input if filled.
* You can inspect the popup markup with your browser tools.
@@ -538,6 +544,10 @@ Autocomplete.propTypes = {
* The component used to position the popup.
*/
PopperComponent: PropTypes.elementType,
+ /**
+ * The icon to display in place of the default popup icon.
+ */
+ popupIcon: PropTypes.node,
/**
* Render the group.
*