How to remove chevron icon when providing menuProps for a FluentUI IconButton component

Question

I would like to not show the chevron (arrow down) next to the icon in my IconButton

const Support = (): React.ReactElement => {
  return (
    <IconButton
      iconProps={{ iconName: 'unknown' }}
      menuProps={menuItems}
    />
  )
}

Do you know how to do that? I have tried to use the ContextualMenu with an IconButton but the menu is positioned wrong (which I suspect is due to sitting inside layered Stack's).

Answer 1

Use onRenderMenuIcon inside IconButton component:

const Support = (): React.ReactElement => {
  return (
    <IconButton
      menuProps={menuItems}
      onRenderMenuIcon={() => <div />} // also you can return undefined | null.
    />
  )
}

Codepen working example.