# Thumbnail service

Retrieves an SVG thumbnail image to represent a document type.

## Methods

`public getDocumentThumbnailUrl(document: any): string`<br/>
Gets a thumbnail URL for a document node.

`public getMimeTypeIcon(mimeType: string): string`<br/>
Gets a thumbnail URL for a MIME type.

`public getDefaultMimeTypeIcon(): string`<br/>
Gets a "miscellaneous" thumbnail URL for types with no other icon defined.

## Details

The service can locate a thumbnail icon (in SVG format) for either
a document node or a MIME type. The default mapping between types
and icons is shown in the table below:

| Document | Icon | Types |
| --- | --- | --- |
| Compressed archive | ![Archive thumbnail](docassets/images/ft_ic_archive.png) | 'application/x-compressed', 'application/x-zip-compressed', 'application/zip' |
| Text | ![Text thumbnail](docassets/images/ft_ic_document.png) | 'text/plain', 'application/json', 'application/x-javascript', 'application/vnd.apple.pages' |
| Bitmap/raster image | ![Bitmap thumbnail](docassets/images/ft_ic_raster_image.png) | 'image/png', 'image/jpeg', 'image/gif' |
| MP4 video | ![MP4 thumbnail](docassets/images/ft_ic_video.png) | 'video/mp4' |
| SVG vector image| ![SVG thumbnail](docassets/images/ft_ic_vector_image.png) | 'image/svg+xml' |
| HTML file | ![HTML thumbnail](docassets/images/ft_ic_website.png) | 'text/html' |
| PDF file | ![PDF thumbnail](docassets/images/ft_ic_pdf.png) | 'application/pdf' |
| Folder | ![Folder thumbnail](docassets/images/ft_ic_folder.png) |  |
| Disabled folder | ![Disabled folder thumbnail](docassets/images/ft_ic_folder_disable.png) | |
| Excel spreadsheet | ![Spreadsheet thumbnail](docassets/images/ft_ic_ms_excel.png) | 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.openxmlformats-officedocument.spreadsheetml.template' |
| PowerPoint slideshow | ![PowerPoint thumbnail](docassets/images/ft_ic_ms_powerpoint.png) | 'application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.presentationml.presentation', 'application/vnd.openxmlformats-officedocument.presentationml.template', 'application/vnd.openxmlformats-officedocument.presentationml.slideshow' |
| Word document | ![Word thumbnail](docassets/images/ft_ic_ms_word.png) | 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.openxmlformats-officedocument.wordprocessingml.template' |
| Keynote presentation | ![Keynote thumbnail](docassets/images/ft_ic_presentation.png) | 'application/vnd.apple.keynote' |
| Numbers spreadsheet | ![Numbers thumbnail](docassets/images/ft_ic_spreadsheet.png) | 'application/vnd.apple.numbers' |

<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
## See also

- [Mime type icon pipe](mime-type-icon.pipe.md)
<!-- seealso end -->