1 files changed, 19 insertions, 9 deletions
diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx
index daa2c152a..445406a89 100644
--- a/src/client/views/ContextMenuItem.tsx
+++ b/src/client/views/ContextMenuItem.tsx
@@ -11,7 +11,7 @@ export interface OriginalMenuProps {
     description: string;
     event: (stuff?: any) => void;
     undoable?: boolean;
-    icon: IconProp; //maybe should be optional (icon?)
+    icon: IconProp | JSX.Element; //maybe should be optional (icon?)
     closeMenu?: () => void;
 }
 
@@ -82,19 +82,28 @@ export class ContextMenuItem extends React.Component<ContextMenuProps & { select
         );
     };
 
+    isJSXElement(val: any): val is JSX.Element {
+        return React.isValidElement(val);
+    }
+
     render() {
         if ('event' in this.props) {
             return (
                 <div className={'contextMenu-item' + (this.props.selected ? ' contextMenu-itemSelected' : '')} onPointerDown={this.handleEvent}>
                     {this.props.icon ? (
-                        <span className="contextMenu-item-icon-background">
-                            <FontAwesomeIcon icon={this.props.icon} size="sm" />
-                        </span>
+                        this.isJSXElement(this.props.icon) ? (
+                            <span className="contextMenu-item-icon-background">{this.props.icon}</span>
+                        ) : (
+                            <span className="contextMenu-item-icon-background">
+                                <FontAwesomeIcon icon={this.props.icon} size="sm" />
+                            </span>
+                        )
                     ) : null}
                     <div className="contextMenu-description">{this.props.description.replace(':', '')}</div>
-                    <div className={`contextMenu-item-background`}
+                    <div
+                        className={`contextMenu-item-background`}
                         style={{
-                            background: StrCast(Doc.UserDoc().userColor)
+                            background: StrCast(Doc.UserDoc().userColor),
                         }}
                     />
                 </div>
@@ -110,7 +119,7 @@ export class ContextMenuItem extends React.Component<ContextMenuProps & { select
                     style={{
                         marginLeft: window.innerHeight - this._overPosX - 50 > 0 ? '90%' : '20%',
                         marginTop,
-                        background: StrCast(Doc.UserDoc().userBackgroundColor)
+                        background: StrCast(Doc.UserDoc().userBackgroundColor),
                     }}>
                     {this._items.map(prop => (
                         <ContextMenuItem {...prop} key={prop.description} closeMenu={this.props.closeMenu} />
@@ -141,9 +150,10 @@ export class ContextMenuItem extends React.Component<ContextMenuProps & { select
                         {this.props.description}
                         <FontAwesomeIcon icon={'angle-right'} size="lg" style={{ position: 'absolute', right: '10px' }} />
                     </div>
-                    <div className={`contextMenu-item-background`}
+                    <div
+                        className={`contextMenu-item-background`}
                         style={{
-                            background: StrCast(Doc.UserDoc().userColor)
+                            background: StrCast(Doc.UserDoc().userColor),
                         }}
                     />
                     {submenu}