💄 update icons

src/app/features/functions/explorer/explorer-viewer/explorer-viewer.component.html

@@ -19,10 +19,7 @@
       }"
       #listOption
     >
-      <mat-icon
-        matListItemIcon
-        [fontIcon]="item.IsDir ? 'folder' : 'description'"
-      ></mat-icon>
+      <mat-icon matListItemIcon [fontIcon]="item | fileIcon"></mat-icon>
       <!-- TODO: icon base on MIME type -->
       <div matListItemTitle>{{ item.Name }}</div>
       <div matListItemLine>{{ item.ModTime | date }}</div>

src/app/features/functions/explorer/explorer-viewer/file-icon.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { FileIconPipe } from './file-icon.pipe';
+
+describe('FileIconPipe', () => {
+  it('create an instance', () => {
+    const pipe = new FileIconPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/features/functions/explorer/explorer-viewer/file-icon.pipe.ts

@@ -0,0 +1,50 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DirectoryItem } from '../explorer.model';
+
+@Pipe({
+  name: 'fileIcon',
+})
+export class FileIconPipe implements PipeTransform {
+  transform(value: DirectoryItem): string {
+    if (value.IsDir) {
+      return 'folder';
+    }
+    const mimeParts = value.MimeType.split('/');
+    switch (mimeParts[0]) {
+      case 'text':
+        return 'description';
+      case 'image':
+        return 'image';
+      case 'audio':
+        return 'audio_file';
+      case 'video':
+        return 'video_file';
+      case 'application':
+        switch (mimeParts[1]) {
+          case 'msword':
+          case 'vnd.openxmlformats-officedocument.wordprocessingml.document':
+          case 'vnd.ms-powerpoint':
+          case 'vnd.openxmlformats-officedocument.presentationml.presentation':
+          case 'vnd.ms-excel':
+          case 'vnd.openxmlformats-officedocument.spreadsheetml.sheet':
+          case 'pdf':
+            return 'docs';
+          case 'zip':
+          case 'x-bzip':
+          case 'x-bzip2':
+          case 'x-tar':
+          case 'gzip':
+          case 'x-gzip':
+          case 'vnd.rar':
+          case 'x-7z-compressed':
+            return 'folder_zip';
+          case 'octet-stream':
+            return 'insert_drive_file';
+          default:
+            return 'insert_drive_file';
+        }
+      default:
+        return 'insert_drive_file';
+    }
+  }
+}

src/app/features/functions/explorer/explorer.component.html

@@ -35,7 +35,7 @@
             matTooltip="Clipboard"
           >
             <mat-icon
-              fontIcon="inventory_2"
+              fontIcon="content_paste"
               class="material-icons-outlined"
               [matBadge]="clipboard?.items?.length"
             ></mat-icon>

src/app/features/functions/explorer/explorer.module.ts

@@ -23,6 +23,7 @@ import { ExplorerRoutingModule } from './explorer-routing.module';
 import { CopyDialogComponent } from './explorer-viewer/copy-dialog/copy-dialog.component';
 import { DeleteConfirmDialogComponent } from './explorer-viewer/delete-confirm-dialog/delete-confirm-dialog.component';
 import { ExplorerViewerComponent } from './explorer-viewer/explorer-viewer.component';
+import { FileIconPipe } from './explorer-viewer/file-icon.pipe';
 import { PathSplitterComponent } from './explorer-viewer/path-splitter/path-splitter.component';
 import { RenameDialogComponent } from './explorer-viewer/rename-dialog/rename-dialog.component';
 import { ExplorerComponent } from './explorer.component';
@@ -35,6 +36,7 @@ import { ExplorerComponent } from './explorer.component';
     PathSplitterComponent,
     RenameDialogComponent,
     CopyDialogComponent,
+    FileIconPipe,
   ],
   imports: [
     CommonModule,