How can I use Font Awesome icons in an Office UI Fabric React icon button component?

user_75701 0
Viewed 1742

I'm using Office Fabric UI in React. I'd like to use Font Awesome icons on an icon button instead of the Fabric ones.

Can anyone show me how I'd do this?

office-ui-fabric font-awesome reactjs icons button
1 Answers

This issue has been raised on their github page and later added to their documents.

Below is the copy&paste from their doc,
registering icons

import { registerIcons } from '@uifabric/styling';
import Icon from '@fortawesome/react-fontawesome';    
registerIcons({
  icons: {
    'Home': <Icon icon={['fal', 'home']} />,
    'HomeSolid': <Icon icon={['fas', 'home']} />,
  }
});

Using it

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

const IconTest = () => <Button iconProps={{ iconName: 'HomeSolid' }} />
user_24526300
Related