Repository: plotly/dash
File: components/dash-core-components/src/components/Clipboard.react.js (JavaScript)

Code before:
            ? copied_children ?? <FontAwesomeIcon icon={faCheckCircle} />
            : children ?? <FontAwesomeIcon icon={faCopy} />;

        return clipboardAPI ? (
            <LoadingElement
                id={id}
                title={title}
                style={isCopied ? copied_style ?? style : style}
                className={isCopied ? copied_className ?? className : className}
                onClick={this.onClickHandler}
            >
                {content}
            </LoadingElement>
        ) : null;
    }
}

Clipboard.defaultProps = {
    content: null,
    html_content: null,
    target_id: null,
    n_clicks: 0,
};

Clipboard.propTypes = {
    /**
     * The ID used to identify this component.
     */
    id: PropTypes.string,

    /**
     * The children of this component.  By default copy icon
     */
    children: PropTypes.node,

    /**
     * The children of this component displayed while copying.  By default checked icon
     */
    copied_children: PropTypes.node,

    /**
     * The id of target component containing text to copy to the clipboard.
     * The inner text of the `children` prop will be copied to the clipboard.  If none, then the text from the
     *  `value` prop will be copied.
     */
    target_id: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),

    /**
     * The text to be copied to the clipboard if the `target_id` is None.
     */
    content: PropTypes.string,

Review comment (suggestion):
I'm a big fan of replacing the hard-coded `<i>` and giving users control of the child elements!
More than just the icon, I think that the default element should include the wrapper button/div itself. For example, a user might prefer to use an anchor instead.

Code after:
                className={className}
                onClick={this.onClickHandler}
            >
                {button_children}
            </LoadingElement>
        ) : null;
    }
}

Clipboard.defaultProps = {
    content: null,
    html_content: null,
    target_id: null,
    n_clicks: 0,
};

Clipboard.propTypes = {
    /**
     * The ID used to identify this component.
     */
    id: PropTypes.string,

    /**
     * Children rendered inside the Clipboard button before copying. By default, a copy icon.
     */
    children: PropTypes.node,

    /**
     * Children rendered inside the Clipboard button after the value has been copied. By default, a check icon.
     */
    copied_children: PropTypes.node,

    /**
     * The id of target component containing text to copy to the clipboard.
     * The inner text of the `children` prop will be copied to the clipboard.  If none, then the text from the
     *  `value` prop will be copied.
     */
    target_id: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),

    /**
     * The text to be copied to the clipboard if the `target_id` is None.
     */
    content: PropTypes.string,

    /**
     * The number of times Clipboard button was clicked
     */
    n_clicks: PropTypes.number,

    /**
     * The clipboard html text be copied to the clipboard if the `target_id` is None.