How to use the latest set of Fluent UI icons for SPFx?

Question

I am using the code from here

https://developer.microsoft.com/en-us/fluentui#/controls/web/icon

which is

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

<FontIcon iconName="Forward" />

I believe these use https://spoprod-a.akamaihd.net/files/fabric/assets/icons/fabric-icons-a13498cf.woff

but sometimes icons do not render. How do I ensure I am referencing the latest set?

Also if there is ever updates to the icon set, will this code just be able to access the new icons on its own or do I need to do something manual like re-compile the sppkg and upload it again to the app catalogue?

Thanks

Answer 1

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

and the you can get the icons like

<Icon iconName='Move' />

Answer 2

According to the official documentation,

1. When we want to use basic icon or Icon with custom color or Icon using custom svg, we need to use FontIcon component.
2. When we want to use Icon using image sheet, we need to use ImageIcon component.
3. When we want to Icon using svg factory, we need to use Icon component.

You can choose different components according to your needs.