office-ui-fabricoffice-ui-fabric-reactfluent-ui

Is there a simple way to change the chevron icons in a nested Nav component?


I personally and a lot of customers think the default icons for links with nested items in the Nav component are strange. Hence I want their look and behavior to change from this:

default look and feel

to this:

intended look and feel

(In the screenshots the size is also different, but that's just from the context's I took them. I just want to change the icons). The latter is btw also used by Microsoft OWA (Outlook Online), which also uses Fluent UI React. The only thing that I could come up with (but which doesn't work really well) was to hide the default chevron using styles and modifying the rendered link onRenderLink to display the other chevrons.

I'm aware of this question, but changing the icons via style is no option and I guess no longer a preferred way by fluent ui.

Is there any better or official way I'm missing?


Solution

  • I've taken a look at the code and unfortunately the icon is baked into the Nav component. Your best option would be to style the icon similar to what is being done in this codepen.