How to use FluentUI React Northstar icons in Fluent UI Contextual Menu

Question

We're using a Fluent UI React Contextual Menu because the Fluent UI Northstar library doesn't contain a Context Menu Component. However, we'd like to use the MS Teams Icons that are in the Fluent UI Northstar library but I can't seem to find any documentation on how to use JSX/Component as your icon on the Contextual Menu. Any ideas how to accomplish this?

Relevant documentation from Microsoft: Fluent UI Context Menu Icon Property Fluent UI Northstar Icons

Answer 1

The contextual menu has a property contextualMenuItemAs to which you can pass a menuItemTemplate function. Here's an example of how to make that function:

  const menuItemTemplate: React.FunctionComponent<IContextualMenuItemProps> = menuItemProps => {

const getIcon = (key: string): JSX.Element => {
  switch (key) {
    case 'phone':
      return <CallIcon outline />;
    case 'chat':
      return <ChatIcon outline />;
    default:
      return <span></span>;
  }
}

return (
  <div>
    <span className={contextMenuItemIconStyle}>{getIcon(menuItemProps.item.key)}</span>
    <span className={contextMenuItemTextStyle}>{menuItemProps.item.text}</span>
  </div>
  )};

You'll then have to style your own styles to style these menu item spans.