Able Pro
Vue
Vue
  • 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
  • Iconsax
  • Material Design icons
  1. Theme UI

Icons

Ablepro Vuetify is pre-configured with the Svg Sprite

PreviousTheme UINextChange Logo

Last updated 1 year ago

Iconsax

All Svg are taken from iconsax library

​

import SvgSprite from '@/components/shared/SvgSprite.vue';

// usage
<SvgSprite name="custom-home" style="width: 20px; height: 20px" />

If you want to add new svg then add svg file using symbol tag with unique id in sprite.svg

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://iconsax.io/
https://vuetifyjs.com/en/features/icon-fonts/#mdi-js-svg