Add PDF file icon

[nero120]

Is there any chance you could add the PDF file icon (the one used in SharePoint) to the brand icons and CDN? I realise it's not a Microsoft brand but it would be really useful for consistency when building apps with Fabric as PDF is such a common file type.

[Jahnp]

Hey @nero120, funny enough, there is actually an updated version of the PDF icon that's currently available in the @uifabric/file-type-icons package.

It looks like this:
.

And you can access this specific PDF icon (intended to be used at 48px) here. If you don't mind looking at code, you can also see the full list of base icon types and the file type extensions they map to here.

It's a part of a much larger set of refreshed file-type icons that we actually use in OneDrive files experiences and SharePoint Document Libraries, among others.

However, as you point out, this set of icons is not currently available in Fabric Core, nor is it documented particularly well. I've opened #1088 to track this larger project, and will keep this specific one open in the meantime until we've updated Fabric Core and the website to include those icons.

[nero120]

That's perfect @Jahnp, thanks very much! I'll use the @uifabric/file-type-icons package until the updated icons have been integrated with fabric core.

[mikewheaton]

Fixed by #1087. The PDF icon will be available in the next release of Fabric Core.

[nero120]

@mikewheaton perhaps you could help me - I'm having trouble utilising the updated icons/scss styles. I'm using office-ui-fabric-react v5.50.0, and I can see that the _BrandIcon.scss, _BrandIcon.Mixins.scss and _BrandIcon.Variables.scss files have been updated to include your icon changes, yet the following html does not display the pdf icon:

<div class="ms-BrandIcon--icon96 ms-BrandIcon--pdf"></div>

What am I missing here?

[mikewheaton]

@nero120 Fabric React contains copies of some of the Fabric Core styles, but it doesn't appear to include the brand icons. If you add a separate reference to Fabric Core you should be able to use the icon. See this CodePen for an example.

[nero120]

This page advises not to use a separate reference to fabric core as fabric react has a dependency on it, and so ships with it's own copy. I can see that fabric react v5.50.0 includes fabric core v9.4.0, and replacing the reference to fabric.min.css in your codeplex to https://unpkg.com/office-ui-fabric-react@5.50.0/dist/css/fabric.min.css still works.

When you say fabric react doesn't include the brand icons, how do you mean? The links to the icon images are just urls to a cdn are they not?

Perhaps I should raise this issue in the fabric react repo, but if you could clarify the issue here I will then use that information when opening a new issue in that repo.

[mikewheaton]

I didn't realize that Fabric React contained a copy of Fabric Core. I had tried creating a CodePen with Fabric React and the brand icons weren't working, but it was because I didn't have the second reference to Fabric Core (from within Fabric React's dist folder) that's needed.

[nero120]

Well I believe there's a number of issues here. First of all, the fabric ui react package does not currently display the classes for the new icons properly, as my html comment above describes (I'll raise a new issue in the fabric ui react repo to address this).

Secondly, and probably more relevant to this repo, the SharePoint Online CDN does not have the updated icons. If I add to my fabric ui react webpart:

<div class="ms-BrandIcon--icon96 ms-BrandIcon--docx"></div>

I see the old icon:

which is being requested from the following url:

https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/docx_96x1.png

Your codepen indicates that the new icon's have different urls (https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/96/docx.png in this case), so either fabric core needs to update the icon urls or the SharePoint Online CDN needs updating with the new icons.