Override officeUI nav chevron icon - reactjs

Question

in the office-ui react fabric how do i over ride the chevon icon
https://developer.microsoft.com/en-us/fabric#/components/nav
In the documentation there is this interface
INavStyles
but i am not able to override it with my own icons. i want to replace the existing chevron with FolderHorizontal and OpenFolderHorizontal icons instead
import { AppContainer } from 'react-hot-loader';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Nav, INavProps } from 'office-ui-fabric-react/lib/Nav';
import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
initializeIcons(/* optional base url */);
....
....
public _getNavLink(): any[] {
return [
{
name: 'Home',
url: '',
links: [{
name: 'Activity',
url: '',
key: 'key1'
},
{
name: 'News',
url: '',
key: 'key2'
}],
isExpanded: true
}
]}
public render() {
return (
<div>
<Nav
getStyles={() => {
return {
chevronIcon: {
color: 'transparent',
transform: 'rotate(0)',
selectors: {
'&:before': {
color: 'rgb(51, 51, 51)',
fontFamily: "FabricMDL2Icons-7",
content: '"\\F12B"',
},
'.is-expanded > * > &:before': {
fontFamily: "FabricMDL2Icons-5",
content: '"\\ED25"',
}
}
}
}
}}
groups={
[
{
links: this._getNavLink()
}
]
}
expandedStateText={ 'expanded' }
collapsedStateText={ 'collapsed' }
selectedKey={ 'key3' }
/>
</div>
);
}

Answer 1

You could set the getStyles property on the Nav component to apply CSS to the chevronIcon slot:
<Nav
getStyles={ () => { return {
chevronIcon: {
color: 'transparent',
transform: 'rotate(0)',
selectors: {
'&:before': {
color: 'rgb(51, 51, 51)',
fontFamily: "FabricMDL2Icons-7",
content: '"\\F12B"',
},
'.is-expanded > * > &:before': {
fontFamily: "FabricMDL2Icons-5",
content: '"\\ED25"',
}
}
}
}} }
groups={...}
expandedStateText={ 'expanded' }
collapsedStateText={ 'collapsed' }
selectedKey={ 'key3' }
/>
The solution is basically hiding away the original chevron, disables the rotation and shows desired icons in the background.
Note that the icons for FolderHorizontal and OpenFolderHorizontal are set using their Unicode representation which can be looked up in the Github repo (e.g. https://github.com/OfficeDev/office-ui-fabric-react/search?q=FolderHorizontal). The two icons live in seperate font families, hence the fontFamily directive.
UPDATE [20180417]
Make sure the fonts are initialized using initializeIcons(); or using a custom path. The font files should then be loaded and appear in your DevTools:
Note that - unlike your code - we are using
import { initializeIcons } from '#uifabric/icons';
to import the initializeIcons.