fluentui/react-icons display them dynamically by their name

[rite2dkrishnan]

Hi

fluentui/react-icons are dispalyed using their icon name as . The corresponding componenet has to be imported in the first place. Is there a way to dispaly the icon dynamically so that if i pass the name as New24Regular as a string, it can be displayed?

I can do the same with material ui icons:
import * as mIcons from "materialui/icons"

GetIcon=(iconName)={
IconComp = mIcons[iconName]
return ;
}

GetIcon("News") will return the element
not able to do the same with fluentui/react icons.
Any help much appreciated.

[tjv255]

Were you able to come up with a solution? I am tasked with a similar problem where wish to create an icon button that can render any icon from data stored on the server. If I can't find a solution, I will be forced to downgrade to Fluent UI 8.

I tried importing the entire image library, which worked, but that made compilation very slow (e.g., import * as icons from "@fluentui/react-icons";). There needs to be a way of selecting a particular component inside the react-icons package based on a property handed by the parent component.

[khmakoto]

FYI @tomi-msft