Icon System Overview
Bimble Chat Vue uses two primary icon systems: Tabler Icons for Vue components and Material Design Icons for Vuetify components.
Dual Icon System
The application combines Tabler Icons (4000+ Vue components) with Material Design Icons for comprehensive icon coverage.
Icon Systems
Tabler Icons (@tabler/icons-vue)
4000+ SVG icons designed as Vue components for modern applications. Used throughout the Vue application for UI elements.
Installation & Setup
# Already included in the project
npm install @tabler/icons-vueUsage in Vue Components
<template>
<div class="chat-header">
<IconMessage :size="24" class="me-2" />
<span>Messages</span>
<IconPhone :size="20" class="ms-auto" />
<IconVideo :size="20" class="ms-2" />
</div>
</template>
<script setup>
import { IconMessage, IconPhone, IconVideo } from '@tabler/icons-vue'
</script>Material Design Icons (@mdi/font)
Material Design icon fonts used primarily with Vuetify components. Provides consistent Material Design aesthetics.
Installation & Setup
# Already included in the project
npm install @mdi/fontUsage with Vuetify Components
<template>
<!-- In Vuetify buttons -->
<v-btn icon="mdi-home" />
<v-btn prepend-icon="mdi-plus">Add Contact</v-btn>
<!-- In Vuetify navigation -->
<v-list-item prepend-icon="mdi-chat" title="Messages" />
<v-list-item prepend-icon="mdi-phone" title="Calls" />
<!-- In Vuetify text fields -->
<v-text-field
prepend-inner-icon="mdi-magnify"
placeholder="Search..."
/>
</template>