vite-vue2-vuetify-ts-starter icon indicating copy to clipboard operation
vite-vue2-vuetify-ts-starter copied to clipboard

Using custom icons

Open MinorFourChord opened this issue 2 years ago • 3 comments

Any ideas on how to use custom icons? The documentation under icons/fonts for Vuetify doesn't seem to work with this example

Vuetify Icons/Fonts Docs

` 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"

MinorFourChord avatar Sep 13 '22 18:09 MinorFourChord

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';

logue avatar Sep 13 '22 22:09 logue

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>

ngjuping avatar Nov 11 '22 02:11 ngjuping

This is the only thing you'll ever need. Ready to import as (vue,react) component, or svg or as css class background image. https://icones.js.org/collection/all?s=flo

AndrianBalanescu avatar Nov 12 '22 16:11 AndrianBalanescu