Am using Nav from office-ui-fabric-react and rendering a Nav bar with icons like here https://learn.microsoft.com/en-us/javascript/api/office-ui-fabric-react/inavlink?view=office-ui-fabric-react-latest#icon. My requirement is to render some custom icon in the Nav bar. The icon property expects a string and am only able to use the icons from here https://uifabricicons.azurewebsites.net/ with thier friendly names,
//Doesn't render icon
{
name: "App details",
url: "http://msn.com",
key: "key1",
target: "_blank"
icon : "SomeURL"(Some custom icon from the project)
}
//renders icon
{
name: "App details",
url: "http://msn.com",
key: "key1",
target: "_blank"
icon : "Documentation"(Any Friendly Name from above list of icons)
}
Requirement : Need to display an icon which is not part of list here https://uifabricicons.azurewebsites.net/
You can try customize how your link looks like using the onRenderLink method
https://developer.microsoft.com/en-us/fluentui#/controls/web/nav