How to use custom icon on coherence/fluent UI Navigation Bar With reactjs

19 Views Asked by At

I am creating web application with reactjs and fluent UI

It is providing me Navigation with Icon, I want to change the Icon with Image tag or the svg, or it is also good if i can change the color of the icon.

Here is the code which i'm using.

import { Navigation } from '@coherence-design-system/navigation';
   
const groups = [
    {
      key: 'Left Nav Menu',
      links: [
        {
          name: 'Home',
          title: 'Home',
          key: 'Home',
          ariaLabel: 'Home',
          icon: 'Home',
          onClick: () => {
            navigate('/');
          },
        }
}]

<Navigation
      isNavCollapsed={isNavCollapsed}
      toggleNavCollapsed={toggleNavCollapsed}
      isMobile={isMobile}
      groups={groups}
      theme={theme.fluentV8 as any}
      styles={{navContainer:{
        backgroundColor:"white"
      }}}
    />

This is the UI have.

0

There are 0 best solutions below