Berry Vuetify
  • Documentation
  • Pre-requisites
  • Quick Start
  • Directory Structure
  • ⛱️Theme UI
    • 🎛️Icons
    • 👓Change Logo
    • 🆎Change Typography
    • 🔮Theme Colors
    • ⚙️Theme Settings
  • 👨‍💻Development
    • State Management
    • Authentication
    • Axios API Calls
    • Routing
  • How to
    • Skip Auth
  • Dependencies
  • Roadmap
  • Support
  • Changelog
  • FAQ
Powered by GitBook
On this page
  • Tabler icons
  • Material Design icons
  1. Theme UI

Icons

Berry Vuetify is pre-configured with the Tabler Icons

PreviousTheme UINextChange Logo

Last updated 12 months ago

Tabler icons

Berry is pre-configured with the most popular font library Tabler Icons.


import {  AccessPointIcon } from "vue-tabler-icons";

// usage
<AccessPointIcon stroke-width="1.5" size="22" />
                            

Material Design icons

Material icons svg using vuetify setup.

Make one different file for imports usable icons and use it.

MDI icon file: src/plugins/mdi-icon.ts

// if you want to use mdi new icon then add like this
import { mdiHome } from '@mdi/js';

export const icons = {
  home: mdiHome,
};
// Usage
<v-icon icon="$home"></v-icon> // Do not forgot to add $ syntax before icon name
⛱️
🎛️
https://tabler-icons.io/
https://vuetifyjs.com/en/features/icon-fonts/#mdi-js-svg