Different ways to add icon to your react office fabric UI project

You might need to add icons to your react office fabric UI project and here are different ways for your reference.

1. Add Office fabric icon directly if the component accept icon attribute. Here is one example for Pivot component for "Search" icon and "SearchAndApps" icons. The UI is displayed as the screenshot below.

              <Pivot>

                  <PivotItem headerText="Search by Isis Numbers" itemIcon="Search">

                    {/* Some React components here*/}

                  </PivotItem>

                  <PivotItem headerText="Search by Compound or Target" itemIcon="SearchAndApps" onRenderItemLink={this._customRenderer}>

               {/* Some React components here*/}                   

                  </PivotItem>

              </Pivot>

2. Add icon as separate component. Here is example to display lightbulb. There is limited style you could apply.

<div className={styles.row}>

<div className={styles.column}>

<Label required={true}> Submission Content </Label>

<Icon iconName={'Lightbulb'} className="ms-IconExample" />

</div>

</div>

You will see the lightbulb icon is in different row and it's difficult to display next to the Label in the same row. Another challenge is it's not possible to add event handler to the icon. The third challenge is the icon size is as default and will be difficult to change.

3. The third way is to convert icon to "svg" format and display in the component as below.

<div className={styles.row}>

<div className={styles.column}>

<Label required={true}> Submission Content </Label>

<svg className="umbrella" xmlns="http://www.w3.org/2000/svg"

width="32" height="32" viewBox="0 0 32 32" aria-labelledby="title">

<title id="title">Umbrella Icon</title>

<path d="M27 14h5c0-1.105-1.119-2-2.5-2s-2.5

0.895-2.5 2v0zM27 14c0-1.105-1.119-2-2.5-2s-2.5

0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5

2v0 14c0 1.112-0.895 2-2 2-1.112 0-2-0.896-2-2.001v-1.494c0-0.291

0.224-0.505 0.5-0.505 0.268 0 0.5 0.226 0.5 0.505v1.505c0

0.547 0.444 0.991 1 0.991 0.552 0 1-0.451

1-0.991v-14.009c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5

2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5

2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-5.415 6.671-9.825

15-9.995v-1.506c0-0.283 0.224-0.499 0.5-0.499 0.268 0 0.5 0.224

0.5 0.499v1.506c8.329 0.17 15 4.58 15 9.995h-5z"/>

{/* This is not wrorking!!! onMouseOut={() => this.mouseOut()}

onMouseOver={() => this.mouseOver()}>{this.label(this.state.displayDescription)} */}

</svg>

</div>

</div>

As you can see the same issue the icon is in separate line and cannot add event to the component. However, it's very easy to adjust the size of the icon. You could search the different methods to convert existing icon to svg format.

4. The forth way is to add emoji icon as text direct to the label. Here is one example.

  private label = displayDescription => {

    if (displayDescription === null) {

        return 'Mouse over to see the magic!';

      }

      return displayDescription ? 'Submission Content Details' : 'Submission Content 🔍';

  }

<div className={styles.row}>

<div className={styles.column}>

<Label required={true} onMouseOut={() => this.mouseOut()}

onMouseOver={() => this.mouseOver()}>{this.label(this.state.displayDescription)}

</Label>

</div>

</div>

You can see the icon is next to the label in same line. You could add event to the component. The only challenge is difficult to change the size of the icon.

Now you have the different ways to add icons to your React Office UI project. There are many different icons you could use. Here is the list.

• Office fabric UI icons here and examples here
• Material UI icons here and examples here
• Semantic icons here
• Fount awesome icons here
• Other icon here

If you need to add icons to SharePoint list as list format, you could refer the good articles here.