fix: use folder material design icon

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

package.json

@@ -33,6 +33,7 @@
     "@nextcloud/vue-dashboard": "^2.0.1",
     "lodash": "^4.17.21",
     "vue": "^2.7.16",
+    "vue-material-design-icons": "^5.3.0",
     "vuex": "^3.6.2"
   },
   "devDependencies": {

src/components/RecommendedFile.vue

@@ -11,7 +11,9 @@
 		@click.prevent="navigate"
 		@keyup.enter.prevent="navigate">
 		<div class="thumbnail"
-			:style="{ 'background-image': 'url(' + previewUrl + ')' }" />
+			:style="{ 'background-image': isFolder ? '' : 'url(' + previewUrl + ')' }">
+			<FolderIcon v-if="isFolder" />
+		</div>
 		<div class="details">
 			<div class="file-name">
 				<template v-if="extension">
@@ -37,8 +39,15 @@ import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { joinPaths } from '@nextcloud/paths'
 
+import FolderIcon from 'vue-material-design-icons/Folder.vue'
+
 export default {
 	name: 'RecommendedFile',
+
+	components: {
+		FolderIcon,
+	},
+
 	props: {
 		id: {
 			type: String,
@@ -163,6 +172,16 @@ export default {
 		background-size: contain;
 		flex-shrink: 0;
 		border-radius: var(--border-radius);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		:deep(.material-design-icon.folder-icon) {
+			&, svg {
+				width: 100%;
+				height: 100%;
+				color: var(--color-primary-element);
+			}
+		}
 	}
 
 	.details {