Fluentui: Custom icon fonts

[jameslaquinta90]

Describe the issue:

I am creating a web app which is not related to any Microsoft products, so as I understand, I cannot use the Office UI Fabric icon fonts (https://developer.microsoft.com/en-us/fabric#/styles/icons). I think its awesome that you've made Selawik available as an easy replacement for Segoe UI, and I am wondering if there is also an easy way to replace the icon fonts with something like Font Awesome?

[micahgodbolt]

@Jahnp this would be a cool demo if possible

[jameslaquinta90]

Not knowing how to integrate Font Awesome (or some other icon fonts) with Fabric React is the only thing stopping me and others from using this library. A demo/ integration guide would make Fabric React much more approachable.

[Jahnp]

This is definitely doable. All controls that render icons, such as CommandBar or ContextualMenu, have an optional onRenderIcon that allows you to pass in whatever icon you'd like. I put together a quick CodePen here, but the code looks like this:

Add font awesome's CSS to the head (grabbed from here):

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

Then in your CommandBar, simply pass a font awesome element to onRenderIcon:

...
// Define items for Fabric CommandBar
const items = [
  {
    key: 'newItem',
    name: 'New',
    split: true,
    onClick: () => console.log('click'),
    cacheKey: 'myCacheKey',
    onRenderIcon: () => { // Provide custom font awesome element
      return <i className="fas fa-plus"></i>
    },
    ariaLabel: 'New. Use left and right arrow keys to navigate',
    ['data-automation-id']: 'newItemMenu'
  },
  ...

The result will look something like this:

Note that I added a little extra CSS to color the icons blue.

Hope this helps. I'll leave this open for now, since it would be useful to add this to the Icons wiki.

[jameslaquinta90]

Thank you so much for the demo, that was incredibly helpful!

[dzearing]

I also wanted to provide another way to do this using the default Icon registration system. If you're following the fontawesome for react docs, you may be using something like FontAwesomeIcon.

FontAwesome requires you use their initialization system to register the icons you want (fontawesome.library.add). If you're already doing this, you can pretty easily also pipe that mapping to the Fabric icon system for simplified use:

import { registerIcons } from '@uifabric/styling';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';

registerIcons({
  icons: {
    'check-square': <FontAwesomeIcon icon='check-square' />,
    ...etc
  }
});

This would allow you to use the registered icon names where you render icons. For example:

import { Button } from 'office-ui-fabric-react/lib/Button';

const Test = () => <Button iconProps={{ iconName: 'check-square' }} />

[michaelangotti]

We are also tracking this in our internal backlog to improve documentation. Will close this one since the question has been answered.