vite-vue2-vuetify-ts-starter
vite-vue2-vuetify-ts-starter copied to clipboard
Using custom icons
Any ideas on how to use custom icons? The documentation under icons/fonts for Vuetify doesn't seem to work with this example
` import Vue from "vue"; import { UserVuetifyPreset } from "vuetify"; import Vuetify from "vuetify/lib"; import "@mdi/font/css/materialdesignicons.css"; import { VuetifyIcons } from "vuetify/types/services/icons";
Vue.use(Vuetify);
export const options: Partial<UserVuetifyPreset> = { theme: { themes: { light: { primary: "#0F62FE", secondary: "#393939", accent: "#0F62FE", error: "#DA1E28", info: "#0443CE", success: "#198038", warning: "#F1C21B", warningOrange: "#FC832C", }, }, }, icons: { values: vuetifyToCarbon, // custom icons here iconfont: "mdi", }, };
export default new Vuetify(options); `
Specifically trying to use carbon icons - "@carbon/icons-vue": "^10.40.0"
What is vuetifyToCarbon
?
This question looks like a question about Vuetify itself rather than a question about this template. It's better to ask questions on the official issue or Discord.
I think you should at least include the following lines:
import { CarbonIconsVue } from '@carbon/icons-vue';
You could use material design icons with Vuetify <v-icon>
component. Here's a list of it: https://materialdesignicons.com/
Example usage: <v-icon>mdi-code-tags</v-icon>