Convenient method to append className

[ackvf]

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

Current Behavior

To append a classname, classNames() or string concatenation must be used explicitly.

<Icon className={classNames(classes.icon, 'fa fa-plus-circle')} />
<Icon className={classNames(classes.icon, 'fa fa-plus-circle')} color="primary"/>
<Icon className={classNames(classes.icon, 'fa fa-plus-circle')} color="secondary"/>

This forces repetitivness and uglifies the code.

Expected Behavior & Example

Proposed improvement is to allow custom classes in the theme object:

const styles = theme => ({
   icon: {
    className: 'fa fa-plus-circle',
    // ...
  },
});

Usage

<Icon className={classes.icon} />
<Icon className={classes.icon} color="primary"/>
<Icon className={classes.icon} color="secondary"/>

classes.icon here represents ${classes.icon} ${classes.icon.className} under the hood.

[oliviertassinari]

@ackvf https://github.com/cssinjs/jss-compose can help.