Use avatar-icon component instead of icon

src/components/AvatarIcon.vue

@@ -0,0 +1,89 @@
+<template>
+	<info-tooltip class='avatar_icon' @hover='loadUser'>
+		<template slot='content'>
+			<template v-if='ajaxUser'>
+				{{ajaxUser.username}}
+			</template>
+			<template v-else>Loading...</template>
+		</template>
+		<div
+			slot='display'
+			class='avatar_icon__icon'
+			:style='{ "background-color": user.color }'
+			@click='$emit("click")'
+		>
+			{{user.username[0]}}
+		</div>
+	</info-tooltip>
+</template>
+
+<script>
+	import InfoTooltip from './InfoTooltip'
+	import AjaxErrorHandler from '../assets/js/errorHandler'
+
+	export default {
+		name: 'AvatarIcon',
+		props: ['user'],
+		components: { InfoTooltip },
+		data () {
+			return {
+				ajaxUser: null
+			}
+		},
+		methods: {
+			loadUser () {
+				if(this.ajaxUser) return
+
+				this.axios
+					.get('/api/v1/user/' + this.user.id)
+					.then((res) => {
+						this.ajaxUser = res.data
+					})
+					.catch(AjaxErrorHandler(this.$store))
+			}
+		}
+	}
+</script>
+
+<style lang='scss'>
+	@import '../assets/scss/variables.scss';
+
+	.avatar_icon {
+		@at-root #{&}__icon {
+			font-size: 0.7rem;
+			margin-right: 0.25rem;
+			color: rgba(0, 0, 0, 0.87);
+		}
+
+		@at-root #{&}__date  {
+			display: inline-block;
+			color: $color__gray--darkest;
+			font-size: 0.8rem;
+		}
+		@at-root #{&}__username {
+			display: inline-block;
+			font-size: 0.9rem;
+			color: #000;
+		}
+
+		@at-root #{&}__content {
+			*:first-child, *:last-child {
+				margin: 0;
+			}
+			p {
+				margin: 0.25rem 0;
+			}
+		}
+
+		@at-root #{&}__icon {
+			height: 3rem;
+			width: 3rem;
+			line-height: 3rem;
+			@include text($font--role-emphasis, 2rem)
+			text-align: center;
+			border-radius: 100%;
+			background-color: $color__gray--darkest;
+			color: #fff;
+		}
+	}
+</style>

src/components/routes/Thread.vue

@@ -33,7 +33,7 @@
 				@mouseleave='setPostFooterState(index, false)'
 			>
 				<div class='post__meta_data'>
-					<div class='post__avatar' :style='{"background-color": post.User.color}'>{{post.User.username[0]}}</div>
+					<avatar-icon :user='post.User' class='post__avatar'></avatar-icon>
 					<div class='post__user'>{{post.User.username}}</div>
 					<replying-to
 						style='margin-right: 0.5rem;'
@@ -78,6 +78,7 @@
 	import InputEditor from '../InputEditor'
 	import PostReply from '../PostReply'
 	import ReplyingTo from '../ReplyingTo'
+	import AvatarIcon from '../AvatarIcon'
 
 	import throttle from 'lodash.throttle'
 	import AjaxErrorHandler from '../../assets/js/errorHandler'
@@ -87,7 +88,8 @@
 		components: {
 			InputEditor,
 			PostReply,
-			ReplyingTo
+			ReplyingTo,
+			AvatarIcon
 		},
 		data () {
 			return {
@@ -259,14 +261,6 @@
 		}
 		@at-root #{&}__avatar {
 			position: absolute;
-			height: 3rem;
-			width: 3rem;
-			line-height: 3rem;
-			@include text($font--role-emphasis, 2rem)
-			text-align: center;
-			border-radius: 100%;
-			background-color: $color__gray--darkest;
-			color: #fff;
 			left: -4rem;
 		}
 		@at-root #{&}__user {