How to use Fluent UI Icons in SharePoint Framework (SPFx)?

Introduction:

In this blog, we will learn how we can use Fluent UI Icons in SPFx Webparts or SPFx Extensions. Here are the steps to use Fluent UI icons:

Steps:

Step 1) To use the Fluent UI icons, first we need to install the package for Fluent UI using the below command. 

 npm i @fluentui/react  

Step 2) Now, we need to import Icons and Iconsprops as given below:

 import { Icon } from '@fluentui/react/lib/Icon';  

Step 3) Now, declare the global variable and assign the icon as given in the below code. Here we are using a global variable so we can use this icon multiple times.

 const HomeIcon = () => <Icon iconName="Home" />;  

Step 4) Now, in the render method we can render the icon as given below:

 <HomeIcon></HomeIcon>  

Here is the full code snippet:

 import * as React from 'react';  
 import { IAlertsProps } from './IAlertsProps';  
 import styles from './Alerts.module.scss';  
 import { escape } from '@microsoft/sp-lodash-subset';  
 import { Icon } from "@fluentui/react";  
 const HomeIcon = () => <Icon iconName="Home" />;  
 export default class Alerts extends React.Component<IAlertsProps, {}> {  
  public render(): React.ReactElement<IAlertsProps> {  
   return (  
    <div className={styles.Alerts}>  
     <HomeIcon></HomeIcon>      
    </div>  
   );  
  }  
 }  

It will display the Home Icon in your web part.

Conclusion:

This is how we can use Fluent UI Icons in SPFx Webparts or Extension. Hope this helps!

If you have any questions you can reach out our SharePoint Consulting team here.