DevExtreme Angular - UI Customization

Custom Thumbnails

View Demo

The FileManager widget allows you to provide custom thumbnails for a file system's items in Thumbnails mode.

DevExtreme FileManager - Custom Thumbnails

Handle the customizeThumbnail function to specify which icons the widget should display for files and folders. This function returns different icons based on a file system item's type (file or folder), extension, or other parameters.

You can specify an icon in the following formats:

  • The icon's URL.
  • The icon's name if the icon is from the DevExtreme icon library.
  • The icon's CSS class if the icon is from an external icon library (see External Icon Libraries).
  • The icon in the Base64 format.
app.component.ts
app.component.html
  • import { DxFileManagerModule } from 'devextreme-angular';
  • // ...
  • export class AppComponent {
  • // ...
  • customizeIcon(fileManagerItem) {
  • if (fileManagerItem.isDirectory)
  • return "images/thumbnails/folder.svg";
  • const fileExtension = fileManagerItem.getExtension();
  • switch (fileExtension) {
  • case ".txt":
  • return "images/thumbnails/doc-txt.svg";
  • case ".rtf":
  • return "images/thumbnails/doc-rtf.svg";
  • case ".xml":
  • return "images/thumbnails/doc-xml.svg";
  • }
  • }
  • }
  • <dx-file-manager id="fileManager"
  • [fileProvider]="fileItems"
  • [customizeThumbnail]="customizeIcon" >
  • <dxo-item-view
  • mode="thumbnails">
  • </dxo-item-view>
  • <!-- ... -->
  • </dx-file-manager>