From f66ac7f6a1f8074a2616b9ddb2365110848c38d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?=
 <raimund.schluessler@mailbox.org>
Date: Fri, 3 Jun 2022 20:43:46 +0200
Subject: [PATCH 1/2] Add md icon slot to avatar component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
---
 src/components/Avatar/Avatar.vue | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/Avatar/Avatar.vue b/src/components/Avatar/Avatar.vue
index ed3a82b78f..962caa4e59 100644
--- a/src/components/Avatar/Avatar.vue
+++ b/src/components/Avatar/Avatar.vue
@@ -50,12 +50,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 +87,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 +684,11 @@ export default {
 		object-fit: cover;
 	}
 
+	.material-design-icon {
+		width: var(--size);
+		height: var(--size);
+	}
+
 	.avatardiv__user-status {
 		position: absolute;
 		right: -4px;

From 1f4d2fb535c0900f3066750e4d14027ec368261c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?=
 <raimund.schluessler@mailbox.org>
Date: Fri, 3 Jun 2022 20:50:56 +0200
Subject: [PATCH 2/2] Add example for avatar with material design icon
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
---
 src/components/Avatar/Avatar.vue | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/components/Avatar/Avatar.vue b/src/components/Avatar/Avatar.vue
index 962caa4e59..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"