3 files changed, 16 insertions, 5 deletions
diff --git a/apps/files/src/components/SidebarTab.vue b/apps/files/src/components/SidebarTab.vue
index c0f5a7d4416..ac3cfba7d02 100644
--- a/apps/files/src/components/SidebarTab.vue
+++ b/apps/files/src/components/SidebarTab.vue
@@ -26,6 +26,9 @@
 		:name="name"
 		:icon="icon"
 		@bottomReached="onScrollBottomReached">
+		<template #icon>
+			<slot name="icon" />
+		</template>
 		<!-- Fallback loading -->
 		<NcEmptyContent v-if="loading" icon="icon-loading" />
 
@@ -63,7 +66,7 @@ export default {
 		},
 		icon: {
 			type: String,
-			required: true,
+			required: false,
 		},
 
 		/**
diff --git a/apps/files/src/models/Tab.js b/apps/files/src/models/Tab.js
index 4c41ec5a3b1..9fd38f71bd7 100644
--- a/apps/files/src/models/Tab.js
+++ b/apps/files/src/models/Tab.js
@@ -59,8 +59,8 @@ export default class Tab {
 		if (typeof name !== 'string' || name.trim() === '') {
 			throw new Error('The name argument is not a valid string')
 		}
-		if (typeof icon !== 'string' || icon.trim() === '') {
-			throw new Error('The icon argument is not a valid string')
+		if ((typeof icon !== 'string' || icon.trim() === '') && typeof icon !== 'object') {
+			throw new Error('The icon argument is not a valid string or vuejs component')
 		}
 		if (typeof mount !== 'function') {
 			throw new Error('The mount argument should be a function')
@@ -97,6 +97,10 @@ export default class Tab {
 		return this._name
 	}
 
+	get isIconClass() {
+		return typeof this._icon === 'string'
+	}
+
 	get icon() {
 		return this._icon
 	}
diff --git a/apps/files/src/views/Sidebar.vue b/apps/files/src/views/Sidebar.vue
index d4bf8cfde40..7c5ac8f0fdb 100644
--- a/apps/files/src/views/Sidebar.vue
+++ b/apps/files/src/views/Sidebar.vue
@@ -67,12 +67,16 @@
 				:id="tab.id"
 				:key="tab.id"
 				:name="tab.name"
-				:icon="tab.icon"
+				:icon="tab.isIconClass ? tab.icon : undefined"
 				:on-mount="tab.mount"
 				:on-update="tab.update"
 				:on-destroy="tab.destroy"
 				:on-scroll-bottom-reached="tab.scrollBottomReached"
-				:file-info="fileInfo" />
+				:file-info="fileInfo">
+				<template #icon v-if="!tab.isIconClass">
+					<component :is="tab.icon" />
+				</template>
+			</SidebarTab>
 		</template>
 	</NcAppSidebar>
 </template>