fileTypeIcon only displays PDF's in SPFx 1.8.2

[c-eiser13]

Thank you for reporting an issue, suggesting an enhancement, or asking a question. We appreciate your feedback - to help the team understand your
needs please complete the below template to ensure we have the details to help. Thanks!

Please check out the documentation to see if your question is already addressed there. This will help us ensure our documentation is up to date.

Category

[ ] Enhancement

[X ] Bug

[ ] Question

Version

Please specify what version of the library you are using: [ 1.13.1 ]

If you are not using the latest release, please update and see if the issue is resolved before submitting an issue.

Expected / Desired Behavior / Question

Use the path property of fileTypeIcon with the Image type and see document icon image.

Observed Behavior

I have an SPFx 1.8.2 web part and I'am using the fileTypeIcon control as below:

The doc.docUrl contains a path to the different documents, a combination of Office and PDF. The PDF image shows, but none of the Office document types display. Tested same markup above in SPFx 1.7.1 web part and it works as expected for all document types.

Here is a screenshot of the markup for an item that has a path to a .docx:

@AJIXuMuK assited with a similar icon issue in the reusable property controls and I suspect this may be a similar issue. If any further info is needed, just let me know. Thanks!

Steps to Reproduce

Create new 1.8.2 web part and add a fileTypeIcon control with image type and a path to an office document.

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[AJIXuMuK]

It looks like we have much larger issue with branded icons...
If you look at official docs we should use getFileTypeIconProps method to display branded icon.
But it looks like this method doesn't work with version 5.131.0 of office-ui-fabric-react that is used in the controls...

@estruyf what do you think?
The only fix for now that I see is to request all png icons directly from Office UI Fabric CDN how it is done for "unknown" file types...

[estruyf]

@AJIXuMuK actually we already had a CDN fallback implemented for PDF file. So what I did right now is to make the CDN fallback the default for image icons and added all the supported file types to the CDN fallback.

Before:

After:

This will be included in version 1.13.2, feel free to test out the beta to see if it fixes it in your scenario.

Here you can read more information on how you can test out the latest beta version: https://sharepoint.github.io/sp-dev-fx-controls-react/beta/

[AJIXuMuK]

Yep, that is exactly what I meant!
Great!

[c-eiser13]

Thanks @AJIXuMuK and @estruyf , I've installed the beta and can confirm the images are working correctly. I came across this issue in the OUIF repo where the new branded office icons appear to have a new CDN URL, may be something to look at moving forward if any changes need to be made. Thanks again for the quick turnaround!

[estruyf]

This has just been released in the version 1.13.2. Will create a new issue for the new CDN URL.