Usinig Office UI Fabrc document icons in an SPFX webpart

%3CLINGO-SUB%20id%3D%22lingo-sub-128571%22%20slang%3D%22en-US%22%3EUsinig%20Office%20UI%20Fabrc%20document%20icons%20in%20an%20SPFX%20webpart%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-128571%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3EHow%20do%20I%20use%20Office%20UI%20Fabric%20document%20icons%20in%20an%20SPFX%20webpart.%20I'm%20showing%20a%20list%20of%20documents%20and%20I%20want%20to%20display%20the%20appropriate%20document%20type%20icon.%20The%20icons%20are%20documented%20at%20%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fen-us%2Ffabric%23%2Fstyles%2Fbrand-icons%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fen-us%2Ffabric%23%2Fstyles%2Fbrand-icons%3C%2FA%3E%2C%20but%20it%20gives%20limited%20info%20as%20to%20how%20to%20use%20them.%3C%2FP%3E%3CP%3EThanks%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-131236%22%20slang%3D%22en-US%22%3ERe%3A%20Usinig%20Office%20UI%20Fabrc%20document%20icons%20in%20an%20SPFX%20webpart%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-131236%22%20slang%3D%22en-US%22%3E%3CP%3Ethanks%2C%20that's%20the%20method%20i%20did%20ended%20up%20using%20and%20is%20way%20less%20code%20than%20other%20methods%20i%20saw%20used.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-131235%22%20slang%3D%22en-US%22%3ERe%3A%20Usinig%20Office%20UI%20Fabrc%20document%20icons%20in%20an%20SPFX%20webpart%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-131235%22%20slang%3D%22en-US%22%3E%3CP%3Ehi%2C%20i%20did%20not%20get%20a%20chance%20to%20try%20that%20out.%20i%20figured%20out%20how%20to%20do%20it%20with%20just%20some%20the%20fabric%20css%20.%20seems%20a%20lot%20simpler.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-131021%22%20slang%3D%22en-US%22%3ERe%3A%20Usinig%20Office%20UI%20Fabrc%20document%20icons%20in%20an%20SPFX%20webpart%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-131021%22%20slang%3D%22en-US%22%3E%3CP%3EYou're%20welcome.%20did%20that%20work%20for%20your%20scenario%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-130956%22%20slang%3D%22en-US%22%3ERe%3A%20Usinig%20Office%20UI%20Fabrc%20document%20icons%20in%20an%20SPFX%20webpart%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-130956%22%20slang%3D%22en-US%22%3E%3CP%3EThanks%2C%20joel.%20that's%20just%20what%20i%20was%20looking%20for.%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-129752%22%20slang%3D%22en-US%22%3ERe%3A%20Usinig%20Office%20UI%20Fabrc%20document%20icons%20in%20an%20SPFX%20webpart%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-129752%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F8901%22%20target%3D%22_blank%22%3E%40Russell%20Gove%3C%2FA%3E%2C%20have%20you%20tried%20something%20like%20the%20%3CA%20title%3D%22PnP%20reusable%20controls%22%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-fx-controls-react%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3EPnP%20reusable%20controls%3C%2FA%3E%3F%3C%2FP%3E%0A%3CP%3EThere%20is%20a%20list%20view%20component%20there%20that%20should%20have%20support%20for%20icons%20(I%20have%20used%20it%2C%20but%20without%20icons).%20There%20is%20also%20a%20file%20type%20icon%20component%20that%20could%20be%20useful%20(to%20use%20directly%20or%20to%20check%20how%20it%20was%20implemented)%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-128973%22%20slang%3D%22en-US%22%3ERe%3A%20Usinig%20Office%20UI%20Fabrc%20document%20icons%20in%20an%20SPFX%20webpart%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-128973%22%20slang%3D%22en-US%22%3E%3CP%3ECould%20you%20be%20more%20specific%3F%20If%20you%20want%20a%20code%20example%2C%20I%20need%20to%20know%20how%20you%20fetch%20the%20document%20and%20render%20the%20HTML%3F%20Which%20library%20are%20you%20using%20(React%2C%20Knockout%2C%20none)%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EUsing%20the%20icon%20is%20quite%20easy%3A%3C%2FP%3E%3COL%3E%3CLI%3EFor%20each%20document%2C%20check%20the%20extension%20of%20the%20document%3C%2FLI%3E%3CLI%3EIf%2C%20for%20example%2C%20the%20document%20extension%20is%20.docx%2C%20render%20the%20appropriate%20HTML%3A%26nbsp%3B%3CBR%20%2F%3E%3CSPAN%20class%3D%22hljs-tag%22%3E%26lt%3B%3CSPAN%20class%3D%22hljs-name%22%3Ediv%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22hljs-attr%22%3Eclass%3C%2FSPAN%3E%3D%3CSPAN%20class%3D%22hljs-string%22%3E%22ms-BrandIcon--icon96%20ms-BrandIcon--word%22%3C%2FSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CSPAN%20class%3D%22hljs-tag%22%3Ediv%3C%2FSPAN%3E%26gt%3B%3C%2FLI%3E%3C%2FOL%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Frequent Contributor

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

6 Replies
Highlighted

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>

 

Highlighted

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)

Highlighted

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

Highlighted

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

Highlighted

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.

Highlighted

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