title: material ui autoComplete with icons
body: <p>Hi I am trying to implement material UI autocomplete dropbox with an icon next to the displayed text.
  my implementation is working, but when I select one of the options its not being displayed.
  The problem is with this part of the code:</p>
  
  <pre><code>renderInput={params =&gt; (
                          &lt;Fragment&gt;
                              &lt;TextField
                                  {...params}
                                  variant="outlined"
                                  label="Select Account"
                                  placeholder="Favorites"
                                  margin="normal"
                                  fullWidth
                              /&gt;
                          &lt;/Fragment&gt;
  
                      )}
  </code></pre>
  
  <p>if I remove he icon rendering from <code>getOptionLabel</code> then when selecting the selected text show just fine.
  any help would be very much appreciated.
  right now the result of this code looks like:
  <a href="https://i.stack.imgur.com/KEGCp.png" rel="noreferrer"><img src="https://i.stack.imgur.com/KEGCp.png" alt="enter image description here"></a></p>
  
  <pre><code>import React, { Fragment, useState } from 'react';
  import { connect } from 'react-redux';
  import PropTypes from 'prop-types';
  import {makeStyles} from "@material-ui/core";
  import Autocomplete from "@material-ui/lab/Autocomplete/Autocomplete";
  import TextField from "@material-ui/core/TextField";
  import FacebookIcon from '@material-ui/icons/Facebook';
  import AppleIcon from '@material-ui/icons/Apple';
  import IconButton from "@material-ui/core/IconButton";
  
  
  const useStyles = makeStyles(theme =&gt; ({
      Select: {
          width: 425,
      },
      icon: {
          color: '#0095e2'
      },
  }));
  
  const SelectAccount = ({ clientAccountsData, accountSelected }) =&gt; {
      const accountSelectedHandler = async (event, values) =&gt; {
          if ( values !== null )
          {
              accountSelected(values);
          }
          else {
              accountSelected('');
          }
      };
  
      const renderCorrectAccountChannelIcon = (network_id) =&gt; {
          if ( network_id=== '1' )
          {
              return (
                  &lt;FacebookIcon/&gt;
              );
          }
          else if ( network_id=== '2' )
          {
              return (
                  &lt;img
                      src={'/Icons/snapchat.png'}
                      height={30}
                      width={30}
                  /&gt;
              );
          }
          else if ( network_id=== '3' )
          {
              return (
                  &lt;img
                      src={'/Icons/google.png'}
                      height={30}
                      width={30}
                  /&gt;
              );
          }
          else if ( network_id=== '4' )
          {
              return (
                  &lt;AppleIcon/&gt;
              );
          }
      };
  
      const classes = useStyles();
          return (
              &lt;div className='material-ui'&gt;
                  &lt;Autocomplete
                      className={classes.Select}
                      id="account_select"
                      options={clientAccountsData}
                      onChange={accountSelectedHandler}
                      getOptionLabel={option =&gt;
                          {
                              return(
                                  &lt;Fragment&gt;
                                      &lt;Icon className={classes.icon}&gt;
                                          {
                                          renderCorrectAccountChannelIcon(option.network_id)
                                          }
                                      &lt;/Icon&gt;
                                      {option.accountName + ' (' + option.accountId + ')'}
                                  &lt;/Fragment&gt;
                              );
                          }
                      }
                      filterSelectedOptions
                      renderInput={params =&gt; (
                          &lt;Fragment&gt;
                              &lt;TextField
                                  {...params}
                                  variant="outlined"
                                  label="Select Account"
                                  placeholder="Favorites"
                                  margin="normal"
                                  fullWidth
                              /&gt;
                          &lt;/Fragment&gt;
  
                      )}
                  /&gt;
              &lt;/div&gt;
          );
  };
  
  SelectAccount.prototypes = {
      accountSelected: PropTypes.func.isRequired,
      clientAccountsData: PropTypes.array.isRequired,
  };
  
  const mapStateToProps = state =&gt; ({
      clientAccountsData: state.client.clientAccountsData,
  });
  
  export default connect(mapStateToProps, {})(SelectAccount);
  </code></pre>
  
  <p>EDIT!:
  Found a fix, we need to use renderOption to render the icon + text
  and use getOptionLabel just for the label text
  it looks like this:</p>
  
  <pre><code>&lt;Autocomplete
                      className={classes.Select}
                      id="account_select"
                      options={clientAccountsData}
                      onChange={accountSelectedHandler}
                      getOptionLabel={option =&gt; option.accountName + ' (' + option.accountNumber + ')'}
                      renderOption={option =&gt; {
                          return (
                              &lt;Fragment&gt;
                                  &lt;Icon className={classes.icon}&gt;
                                      {
                                          renderCorrectAccountChannelIcon(option.network_id)
                                      }
                                  &lt;/Icon&gt;
                                  {option.accountName + ' (' + option.accountNumber + ')'}
                              &lt;/Fragment&gt;
                          );
                      }}
                      filterSelectedOptions
                      renderInput={params =&gt; (
                          &lt;Fragment&gt;
                              &lt;TextField
                                  {...params}
                                  variant="outlined"
                                  label="Select Account"
                                  placeholder="Favorites"
                                  margin="normal"
                                  fullWidth
                              /&gt;
                          &lt;/Fragment&gt;
  
                      )}
                  /&gt;
  </code></pre>