Override officeUI nav chevron icon

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.