How To Use Fluent UI Icons In SPFx Web Part

In this blog, we will learn how can we use the icons of fluent UI in SPFx Web parts or SPFx Extensions.

Introduction

In this blog, we will learn how can we use the icons of fluent UI in SPFx Web parts or SPFx Extensions.

Here are the steps to use fluent UI icons:

Steps to use fluent UI in SPFx Web parts/Extensions

Step 1

To use the fluent UI icons, first we need to install the package for fluent UI using 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 below code. Here we are using global variable so we can use this icon multiple times.

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

Step 4

Now, in 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 on your web part.

Conclusion

This is how we can use fluent UI icons in SPFx web parts or Extensions. Hope this blog will be helpful for you!