[Chip] Support non-avatared icon on Chip

[hidai]

The Material Design spec allows us to put a simple icon which is not wrapped by an avatar component on Chips.
See https://material.io/design/components/chips.html#
But Chip of material-ui presupposes an Avatar as icon.

• This is a v1.x and v3.0 issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Support <Chip avatar={<SvgIcon />} /> or add a new props like <Chip icon={<SvgIcon />}.

Current Behavior

<Chip avatar={<SvgIcon />} /> renders the icon too big.

Examples

https://codesandbox.io/s/m5mkwyy19y?module=%2Fsrc%2Fpages%2Findex.js

[aretheregods]

@oliviertassinari @hidai I'd like to tackle this issue. I'm thinking it'd be better to use an "icon" attribute as opposed to extending the avatar attribute. That's more explicit and I imagine a little easier to code, easier to deal with from a testing standpoint and also a little more modular. What do you think?

[oliviertassinari]

@aretheregods I had the same thought. I think that adding an icon property has potential.

On a side note, here is a quick workaround:

      <Chip
        label={
          <React.Fragment>
            <FaceIcon style={{ marginRight: 8, marginLeft: -8 }} />
            Basic Chip
          </React.Fragment>
        }
      />

[oliviertassinari]

@fzaninotto Regarding your icon positioning issue. I just had a look at vuetify, they are doing something interesting https://vuetifyjs.com/en/components/chips#introduction.

    <v-chip color="orange" text-color="white">
      Premium
      <v-icon right>star</v-icon>
    </v-chip>

    <v-chip color="primary" text-color="white">
      <v-icon left>cake</v-icon>
      1 Year
    </v-chip>

What do you think of adding a property like this to the Icon & SvgIcon component?:

placement?: 'start' | 'end';

Alternatively, I really like what styled-system is doing. It's a great source of inspiration for more Material-UI utilities component, like a Spacing or something that can be composed into a Box.

[aretheregods]

@oliviertassinari I made added some icon stuff and wanted to get your opinion of what changes I should make (I haven't added tests yet, I know), I made a pull request: #12881