[Select] Apply disabled color to the icon (#20287)

* [NativeSelect] fix icon color on disabled state

* [Autocomplete] unify disabled icon color handling with NativeSelect

* [Autocomplete] Handle clear icon for consistency

* color instead of opacity?

Co-authored-by: Olivier Tassinari <[email protected]>

Author: HenryLie

packages/material-ui-lab/src/Autocomplete/Autocomplete.js

@@ -134,7 +134,6 @@ export const styles = (theme) => ({
   clearIndicator: {
     marginRight: -2,
     padding: 4,
-    color: theme.palette.action.active,
     visibility: 'hidden',
   },
   /* Styles applied to the clear indicator if the input is dirty. */
@@ -143,7 +142,6 @@ export const styles = (theme) => ({
   popupIndicator: {
     padding: 2,
     marginRight: -2,
-    color: theme.palette.action.active,
   },
   /* Styles applied to the popup indicator if the popup is open. */
   popupIndicatorOpen: {

packages/material-ui/src/NativeSelect/NativeSelect.js

@@ -72,8 +72,11 @@ export const styles = (theme) => ({
     position: 'absolute',
     right: 0,
     top: 'calc(50% - 12px)', // Center vertically
-    color: theme.palette.action.active,
     pointerEvents: 'none', // Don't block pointer events on the select under the icon.
+    color: theme.palette.action.active,
+    '&$disabled': {
+      color: theme.palette.action.disabled,
+    },
   },
   /* Styles applied to the icon component if the popup is open. */
   iconOpen: {

packages/material-ui/src/NativeSelect/NativeSelectInput.js

@@ -35,7 +35,11 @@ const NativeSelectInput = React.forwardRef(function NativeSelectInput(props, ref
         {...other}
       />
       {props.multiple ? null : (
-        <IconComponent className={clsx(classes.icon, classes[`icon${capitalize(variant)}`])} />
+        <IconComponent
+          className={clsx(classes.icon, classes[`icon${capitalize(variant)}`], {
+            [classes.disabled]: disabled,
+          })}
+        />
       )}
     </React.Fragment>
   );

packages/material-ui/src/Select/SelectInput.js

@@ -349,6 +349,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
       <IconComponent
         className={clsx(classes.icon, classes[`icon${capitalize(variant)}`], {
           [classes.iconOpen]: open,
+          [classes.disabled]: disabled,
         })}
       />
       <Menu