I am using the code from here


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?


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

and the you can get the icons like

<Icon iconName='Move' />
  • Why do this and not FontIcon though?
    – omega
    Nov 24 '20 at 21:50
  • Also if new icons are released, does it pick it up automatically or do I need to manually do anything?
    – omega
    Nov 24 '20 at 22:01

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.

  • It seems using Icon made some broken icons render. But going forward, how does updates to icons work? If more are released, how can I ensure using Icon will be able to pick it up? Or is it automatically referencing the latest one and there is no need to re-compile and deploy?
    – omega
    Nov 25 '20 at 1:57
  • Could you share the link to the documentation for the FontIcon and ImageIcon components?
    – Christophe
    Dec 27 '20 at 0:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.