Usinig Office UI Fabrc document icons in an SPFX webpart

Iron Contributor


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, but it gives limited info as to how to use them.


6 Replies

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>


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)

Thanks, joel. that's just what i was looking for. 

You're welcome. did that work for your scenario?

hi, i did not get a chance to try that out. i figured out how to do it with just some the fabric css . seems a lot simpler.

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