Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
77
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Purchase

File Type

File Type renders a compact SVG icon for a file based on a MIME type, extension, or file name. Use it in file lists, upload previews, attachment cards, media libraries, document pickers, and activity feeds where a file needs a clear visual type indicator.

The component resolves explicit extensions first, then file name extensions, then MIME types. Unknown files fall back to TXT by default, or to the fallback type you provide.

File Type only renders the icon. Pair it with Upload, List, Card, DataView, or Table when users need selection, progress, actions, metadata, or records around the file.

ngs-file-type

PropTypeDefault
fileName
File name used to resolve the icon from its extension.
string | null | undefinedundefined
extension
Explicit extension. Takes priority over fileName and mimeType.
string | null | undefinedundefined
mimeType
MIME type used when no extension can be resolved.
string | null | undefinedundefined
fallback
Icon type used when the extension and MIME type are unknown.
FileTypeNametxt
label
Accessible label for the icon host.
string | null | undefined`${type.toUpperCase()} file`
decorative
Marks the icon as decorative and removes role and label from the host.
booleanfalse

Types

NameTypeDefault
FileTypeName
Supported icon names.
'avi' | 'csv' | 'doc' | 'html' | 'jpg' | 'json' | 'mkv' | 'mov' | 'mp3' | 'mp4' | 'pdf' | 'png' | 'ppt' | 'svg' | 'txt' | 'wav' | 'webm' | 'xls' | 'xml' | 'zip'