Forum Discussion

Russell Gove's avatar
Russell Gove
Iron Contributor
Nov 16, 2017

Usinig Office UI Fabrc document icons in an SPFX webpart

Hi,

How do I use Office UI Fabric document icons in an SPFX webpart. I'm showing a list of documents and I want to display the appropriate document type icon. The icons are documented at https://developer.microsoft.com/en-us/fabric#/styles/brand-icons, but it gives limited info as to how to use them.

Thanks

  • Maggan Wåhlin's avatar
    Maggan Wåhlin
    Iron Contributor
    Nov 17, 2017

    Could you be more specific? If you want a code example, I need to know how you fetch the document and render the HTML? Which library are you using (React, Knockout, none)?

     

    Using the icon is quite easy:

    1. For each document, check the extension of the document
    2. If, for example, the document extension is .docx, render the appropriate HTML: 
      <div class="ms-BrandIcon--icon96 ms-BrandIcon--word"></div>

     

    • russell gove's avatar
      russell gove
      Copper Contributor
      Nov 25, 2017

      thanks, that's the method i did ended up using and is way less code than other methods i saw used.

  • Joel Rodrigues's avatar
    Joel Rodrigues
    MVP
    Nov 20, 2017

    Hi Russell Gove, have you tried something like the PnP reusable controls?

    There is a list view component there that should have support for icons (I have used it, but without icons). There is also a file type icon component that could be useful (to use directly or to check how it was implemented)