React-wysiwyg - Change the toolbar icon color onHover, onClick

I'm using react-wysiwg and i'm trying to change the color of toolbar icons when ever user hovers on it or when the user selects it.

As the toolbar bold / italic icon is in base64 encoded format i'm not able to change the color of the icon whenever user hovers on it - Is there a way to change it? - filter: "invert(0.8)" works but is there way to change the color?

Also, is there a way to change the color of the icon when the selected styling is in active state?

const useStyles = makeStyles((theme) => {
    return {
      icons: {
        "& img:hover": {
          color: "red", //This doesn't work
          filter: "invert(0.8)", //This works
        },
      },
    };
  });
  const EditorComponent = () => {
    const [editorState, setEditorState] = useState(EditorState.createEmpty());
    const classes = useStyles();
    return (
      <Editor
        wrapperClassName={classes.wrapper}
        editorClassName={classes.editorClass}
        editorState={editorState}
        onEditorStateChange={setEditorState}
        toolbar={{
          options: ["inline"],
          inline: {
            options: ["bold", "italic"],
            className: classes.inline,
            bold: {
              icon: undefined,
              className: classes.icons,
            },
            italic: {
              icon: undefined,
              className: classes.icons,
            },
          },
          // className: classes.toolbar
        }}
      />
    );
  };