Toolbar button icon is not working

[janaka120]

Toolbar button icon does show when I pass the icon through the toolbar configuration like this

this.blockButtons = [{
      label: 'H1',
      style: 'header-one',
      icon: 'header',
      description: 'Heading 1',
    }, 
]

[janaka120]

I checked on the master branch. Icon prop does not pass to StyleButton.js from the blocktoolbar.js. I think because this issue, It was broken.

@brijeshb42 I can fix and send a PR for you. If you want.
Thank you.

[brijeshb42]

Icon will show only for recognized strings. Font awesome is used underneath. If that icon exists, it will show up. Otherwise, it's better you send jsx in label to control the look fulky

[janaka120]

But when I checked on the code I didn't see any icon prop pass in to styleButton.js from the blocktoolbar.js

const BlockToolbar = (props) => {
  if (props.buttons.length < 1) {
    return null;
  }
  const { editorState } = props;
  const blockType = RichUtils.getCurrentBlockType(editorState);
  return (
    <div className="md-RichEditor-controls md-RichEditor-controls-block">
      {props.buttons.map((type) => {
        const iconLabel = {};
        iconLabel.label = type.label;
        return (
          <StyleButton
            {...iconLabel}
            key={type.style}
            active={type.style === blockType}
            onToggle={props.onToggle}
            style={type.style}
            description={type.description}
            onClick={type.onClick}
          />
        );
      })}
    </div>
  );
};

So styleButton.js icon show condition not pass. It always false.

return (
      <span
        className={`${className} hint--top`}
        onMouseDown={this.onToggle}
        aria-label={this.props.description}
      >
        {this.props.icon ? <i className={`fa fa-${this.props.icon}`} /> : this.props.label}
      </span>
);

Please correct me if I'm wrong.

[janaka120]

@brijeshb42 any update on this issue