React: Pass component as prop without using this.props.children

The only thing you have missed is that for JSX to transpile to JS custom components should be named starting with a capital letter, e.g. <TheIcon />, while lowercase letter signifies native DOM elements, e.g. <button />.:

render() {
  const TheIcon = this.props.icon;  // note the capital first letter!
  return (
    <button>
      {this.props.children}
      <TheIcon className={ Styles.buttonIcon } />
    </button>
  )
}

https://jsfiddle.net/03h2swkc/3/