Add custom SVG icons to command bar Items

Discussed in https://github.com/microsoft/fluentui/discussions/30899

^{Originally posted by shree998 March 28, 2024}
I have multiple command bar items that need custom SVG Icons, but no matter what I do, I cannot get the icons to work for the life of me.

Here is the SVG I am registering as an icon:
registerIcons({ icons: { 'Assigned-svg': ( <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.9995 32"> <path class="cls-1" d="M25.9995,8.5781v23.4219H0V0h17.4214l8.5781,8.5781ZM23.9995,30V10h-8V2H2v28h21.9995ZM4,4h2v2h-2v-2ZM4,8h2v2h-2v-2ZM4,12h2v2h-2v-2ZM20.9995,14h1v14h-2v-4h-6.5776l-4,4h-2.4219l13.9995-14ZM19.9995,17.4219l-4.5781,4.5781h4.5781v-4.5781ZM17.9995,8h4.5781l-4.5781-4.5781v4.5781Z" /> </svg> ) } });

Here is the command bar items, the first item is where the icon should go to:

`const _items: ICommandBarItemProps[] = [
{
key: 'assigned',
text: 'Assigned',
cacheKey: 'myCacheKey',
//iconProps: { iconName: 'Assign' },
iconProps: {iconName: 'Assigned-svg''},

      className: filterType == 'assigned'? 'selectedView': '',
      onClick: () => handleFilterChange('assigned')
    },
    {
      key: 'overdue',
      text: 'Overdue',
      iconProps: { iconName: 'EventInfo' },
      className: filterType == 'overdue'? 'selectedView': '',
      onClick: () => handleFilterChange('overdue')
    },
    {
      key: 'submitted',
      text: 'Submitted',
      iconProps: { iconName: 'Share' },
      className: filterType == 'submitted'? 'selectedView': '',
      onClick: () => handleFilterChange('submitted')
    },
    {
      key: 'reviewed',
      text: 'Reviewed',
      iconProps: { iconName: 'ReviewSolid' },
      className: filterType == 'reviewed'? 'selectedView': '',
      onClick: () => handleFilterChange('reviewed')
    },{
      key: 'all',
      text: 'All',
      iconProps: { iconName: 'ViewAll' },
      className: filterType == 'all'? 'selectedView': '',
      onClick: () => handleFilterChange('all')
    }
  ];`

Interestingly, the icon works perfectly when loaded as a FontIcon, but doesn't work as an icon of a command bar item:
`return (
<>
<FontIcon
iconName="Assigned-svg"
aria-hidden={undefined}
className={mergeStyles(iconClass, {
width: 50,
height: 50,

  })}
/>
<AssignedIcon>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.9995 32">
      <path d="M25.9995,8.5781v23.4219H0V0h17.4214l8.5781,8.5781ZM23.9995,30V10h-8V2H2v28h21.9995ZM4,4h2v2h-2v-2ZM4,8h2v2h-2v-2ZM4,12h2v2h-2v-2ZM20.9995,14h1v14h-2v-4h-6.5776l-4,4h-2.4219l13.9995-14ZM19.9995,17.4219l-4.5781,4.5781h4.5781v-4.5781ZM17.9995,8h4.5781l-4.5781-4.5781v4.5781Z" />
    </svg>
  </AssignedIcon>
  <CommandBar
    items={_items}
    ariaLabel="Inbox actions"
    styles={{root: {backgroundColor: ''}}}
 
  />   
  </>

);`

Please help.

Start by reproducing the reported registerIcons and CommandBar items example, then compare how CommandBar resolves iconProps with how FontIcon resolves the same registered SVG icon. Done means a custom registered SVG renders in the first CommandBar item while the existing built-in icons continue to work.