Office-UI-Fabric-React: How to replace the icons "ChevronDown" and "ChevronRight" in a CommandBar menu?

Question

Please have a look at the following demo: https://codesandbox.io/s/sharp-bell-u9e3s

You see a simple CommandBar example where at "Submenu 1.2" the normal icon "ChevronRight" is replaced by the icon "Forward". The other icon at top level should also be replace => instead of "ChevronDown" the icon called "Down" shall be used. How is this possible???

PS: Of course, in real world I want those icons to be replaced by totally different open-source license icons, but I wanted the demo to be as simple as possible. BTW: Function "registerIcons" is not an option for me.

Answer 1

Each commandbar item is a button. Button's take menuIconProps.

        key: "1.0",
        name: "Menu 1",
        menuIconProps: {
            iconName: 'Add'
        },

Check out the icon component for other ways to customize:https://developer.microsoft.com/en-us/fabric#/controls/web/icon