Иконки вместо текста как вкладки на vue js

Всем привет. Захотел сделать нижнее меню на подобие как VK, где кликаешь на иконки и меняется контент, разный контент реализовал, но никак не могу сделать чтобы у каждой вкладки была своя иконка. Скриншот и код предоставляю. Не обращайте внимание на стиль, мне для начало нужно разобраться с логикой Использую Vue CLI

<template>
 <div id="app">
  <font-awesome-icon icon="user-secret" v-for="tab in tabs" :key='tab' @click="currentTab = tab" :class="['tab-button', {active: currentTab === tab}]"> {{ tab }}</font-awesome-icon>

<component v-bind:is="currentTabComponent"></component>
</div>
</template>

<script>
import Posts from './Posts.vue'
import List from './List.vue'

export default {
  data () {
    return {
      currentTab: 'Posts',
      tabs: ['Posts', 'List'],
      icon: 'user-secret'
    }
      },
    components: {
      tabPosts: Posts,
      tabList: List
  },
  computed: {
    currentTabComponent() {
      return 'tab-' + this.currentTab.toLowerCase()
    }
    }
      }

  



</script>

<style scoped>
body {
  overflow: auto;
  padding: 0;
  margin: 0;
}

#app {
  position: relative;
  width: 320px;
  height: 400px;
  border:  solid 1px black;
}
 .tab-button.active {
  position: relative;
  color: red;
    height: 50px;
  width: 50px;

 }

 .tab-button {
  position: relative;
  float:  right;
  bottom: 10px;
  height: 50px;
  width: 50px;

 }
</style>