Add custom SVG icons to command bar Items

[shree998]

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': ( ) } }); ` 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 ( <> );` Please help.

[shree998]

I found a way to do this, the onRenderIcon function works, but it only works if iconProps is provided with a fluent UI-registered icon name.

const _items: ICommandBarItemProps[] = [ { key: 'assigned', text: 'Assigned', //cacheKey: 'myCacheKey', iconProps: { iconName: 'Assign' }, onRenderIcon: () => (<img style={{ height: "20px", width: "20px" }} src={AssignmentIcons.Assigned} />), className: filterType == 'assigned' ? 'selectedView' : '', onClick: () => handleFilterChange('assigned') },