diff --git a/src/components/Avatar/Avatar.vue b/src/components/Avatar/Avatar.vue
index ed3a82b78f..9741dd7cef 100644
--- a/src/components/Avatar/Avatar.vue
+++ b/src/components/Avatar/Avatar.vue
@@ -34,6 +34,27 @@
 	<avatar url="https://nextcloud.com/wp-content/themes/next/assets/img/common/nextcloud-square-logo.png" />
 ```
 
+### Avatar with material design icon
+
+```
+ <template>
+	<avatar>
+		<template #icon>
+			<AccountMultiple :size="20" decorative />
+		</template>
+	</AppNavigationNew>
+ </template>
+ <script>
+ import AccountMultiple from 'vue-material-design-icons/AccountMultiple'
+
+ export default {
+	components: {
+		AccountMultiple,
+	},
+ }
+ </script>
+```
+
 </docs>
 <template>
 	<div ref="main"
@@ -50,12 +71,15 @@
 		:role="disableMenu ? '' : 'button'"
 		v-on="!disableMenu ? { click: toggleMenu } : {}"
 		@keydown.enter="toggleMenu">
-		<!-- Avatar icon or image -->
-		<div v-if="iconClass" :class="iconClass" class="avatar-class-icon" />
-		<img v-else-if="isAvatarLoaded && !userDoesNotExist"
-			:src="avatarUrlLoaded"
-			:srcset="avatarSrcSetLoaded"
-			alt="">
+		<!-- @slot Icon slot -->
+		<slot name="icon">
+			<!-- Avatar icon or image -->
+			<div v-if="iconClass" :class="iconClass" class="avatar-class-icon" />
+			<img v-else-if="isAvatarLoaded && !userDoesNotExist"
+				:src="avatarUrlLoaded"
+				:srcset="avatarSrcSetLoaded"
+				alt="">
+		</slot>
 
 		<!-- Contact menu -->
 		<Popover v-if="hasMenu"
@@ -84,7 +108,7 @@
 			:class="'avatardiv__user-status--' + userStatus.status" />
 
 		<!-- Show the letter if no avatar nor icon class -->
-		<div v-if="userDoesNotExist && !iconClass" class="unknown">
+		<div v-if="userDoesNotExist && !(iconClass || $slots.icon)" class="unknown">
 			{{ initials }}
 		</div>
 	</div>
@@ -681,6 +705,11 @@ export default {
 		object-fit: cover;
 	}
 
+	.material-design-icon {
+		width: var(--size);
+		height: var(--size);
+	}
+
 	.avatardiv__user-status {
 		position: absolute;
 		right: -4px;