[Autocomplete] Add closeIcon and popupIcon props (#18266)

Author: AbdullahElrubi

docs/pages/api/autocomplete.md

@@ -29,6 +29,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">autoSelect</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | 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. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">clearOnEscape</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, clear all values when the user presses escape and the popup is closed. |
+| <span class="prop-name">closeIcon</span> | <span class="prop-type">node</span> | <span class="prop-default">&lt;CloseIcon fontSize="small" /></span> | The icon to display in place of the default close icon. |
 | <span class="prop-name">debug</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | 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. |
 | <span class="prop-name">defaultValue</span> | <span class="prop-type">any</span> |  | The default input value. Use when the component is not controlled. |
 | <span class="prop-name">disableClearable</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | 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
 | <span class="prop-name">options</span> | <span class="prop-type">array</span> | <span class="prop-default">[]</span> | Array of options. |
 | <span class="prop-name">PaperComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Paper</span> | The component used to render the body of the popup. |
 | <span class="prop-name">PopperComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Popper</span> | The component used to position the popup. |
+| <span class="prop-name">popupIcon</span> | <span class="prop-type">node</span> | <span class="prop-default">&lt;ArrowDropDownIcon /></span> | The icon to display in place of the default popup icon. |
 | <span class="prop-name">renderGroup</span> | <span class="prop-type">func</span> |  | Render the group.<br><br>**Signature:**<br>`function(option: any) => ReactNode`<br>*option:* The group to render. |
 | <span class="prop-name required">renderInput&nbsp;*</span> | <span class="prop-type">func</span> |  | Render the input.<br><br>**Signature:**<br>`function(params: object) => ReactNode`<br>*params:* null |
 | <span class="prop-name">renderOption</span> | <span class="prop-type">func</span> |  | Render the option, use `getOptionLabel` by default.<br><br>**Signature:**<br>`function(option: any, state: object) => ReactNode`<br>*option:* The option to render.<br>*state:* The state of the component. |

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<PopperProps>;
+  /**
+   * The icon to display in place of the default popup icon.
+   */
+  popupIcon?: React.ReactNode;
   /**
    * Render the group.
    *

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 = <CloseIcon fontSize="small" />,
     debug = false,
     defaultValue,
     disableClearable = false,
@@ -192,6 +193,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
     options = [],
     PaperComponent = Paper,
     PopperComponent: PopperComponentProp = Popper,
+    popupIcon = <ArrowDropDownIcon />,
     renderGroup: renderGroupProp,
     renderInput,
     renderOption: renderOptionProp,
@@ -302,7 +304,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
                       [classes.clearIndicatorDirty]: dirty,
                     })}
                   >
-                    <CloseIcon fontSize="small" />
+                    {closeIcon}
                   </IconButton>
                 )}
 
@@ -315,7 +317,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
                       [classes.popupIndicatorOpen]: popupOpen,
                     })}
                   >
-                    <ArrowDropDownIcon />
+                    {popupIcon}
                   </IconButton>
                 )}
               </React.Fragment>
@@ -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.
    *