[Select] Hide SVG icon for native multiple select (mui#16992)

* [Select] Ensured SVG icon is not displayed for native multiple Select components

* simple test

Author: craigmjackson

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

@@ -25,7 +25,7 @@ const NativeSelectInput = React.forwardRef(function NativeSelectInput(props, ref
         ref={inputRef || ref}
         {...other}
       />
-      <IconComponent className={classes.icon} />
+      {props.multiple ? null : <IconComponent className={classes.icon} />}
     </React.Fragment>
   );
 });
@@ -58,6 +58,10 @@ NativeSelectInput.propTypes = {
    * @deprecated
    */
   inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * @ignore
+   */
+  multiple: PropTypes.bool,
   /**
    * Name attribute of the `select` or hidden `input` element.
    */

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

@@ -98,6 +98,30 @@ describe('<Select />', () => {
     });
   });
 
+  describe('SVG icon', () => {
+    it('should not present an SVG icon when native and multiple are specified', () => {
+      const { container } = render(
+        <Select native multiple value={[0, 1]}>
+          <option value={0}>Zero</option>
+          <option value={1}>One</option>
+          <option value={2}>Two</option>
+        </Select>,
+      );
+      expect(container.querySelector('svg')).to.be.null;
+    });
+
+    it('should present an SVG icon', () => {
+      const { container } = render(
+        <Select native value={1}>
+          <option value={0}>Zero</option>
+          <option value={1}>One</option>
+          <option value={2}>Two</option>
+        </Select>,
+      );
+      expect(container.querySelector('svg')).to.be.visible;
+    });
+  });
+
   describe('accessibility', () => {
     it('sets aria-expanded="true" when the listbox is displayed', () => {
       const { getByRole } = render(<Select open value="none" />);