Icons
Vuetify comes bootstrapped with support for Material Icons, Material Design Icons, Font Awesome 4 and Font Awesome 5. By default, applications will default to use Google's Material Icons.
用例
In order to change your font library, add the iconfont
option during instantiation.
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify, {
iconfont: 'mdi' // 'md' || 'mdi' || 'fa' || 'fa4'
})
Using a predefined option will prefill defaults based upon the selected preset. This will overwrite the defaults of components that have default icon values. Click here to view icon values by preset.
Installing fonts
You are required to include the specified icon library (even if using default). This can be done by including a CDN link or importing the icon library into your application
Install Material Icons
This is the default icon font for Vuetify. For projects without a build process, it is recommended to import the icons from CDN
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
Alternatively, it is possible to install locally using yarn or npm. Keep in mind that this is not an official google repository and may not receive updates
$ yarn add material-design-icons-iconfont -D
// OR
$ npm install material-design-icons-iconfont -D
Once you have installed the package, import it into your main entry js file. This is typically the main.js
, index.js
or app.js
located in your src/
folder. If you are using an SSR application, you may have a client.js
or entry-client.js
file.
// main.js
import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify, {
iconfont: 'md'
})
Install Material Design Icons
$ yarn add @mdi/font -D
// OR
$ npm install @mdi/font -D
Installation is the same as the above. You will need to import the library into your application.
// app.js
import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify, {
iconfont: 'mdi'
})
Install Font Awesome 5 Icons
The easiest way to get started with FontAwesome is to use a cdn. Within the head of your main index.html
place this snippet:
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">
To install locally you can pull in the Free version of FontAwesome using your preferred package manager:
$ yarn add @fortawesome/fontawesome-free -D
// OR
$ npm install @fortawesome/fontawesome-free -D
Within your main entry point, simply import the package's all.css. If you are using a configured webpack project, you will need to setup support for .css
files using the webpack css loader. If you are already using vue-cli-3, this is done for you automatically.
// main.js
import '@fortawesome/fontawesome-free/css/all.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify, {
iconfont: 'fa'
})
Install Font Awesome 4 Icons
Same as above. Installing FontAwesome through cdn is the easiest way to check it out within your project:
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.x/css/font-awesome.min.css" rel="stylesheet">
Installing FontAwesome4 is the same as its newer version, just from a different repository. You will be targeting the font-awesome
repo as opposed to @fortawesome
one.
$ yarn add font-awesome@4.7.0 -D -D
// OR
$ npm install font-awesome@4.7.0 -D -D
Don't forget, your project will need to recognize css. If you are using webpack, install and setup the css loader.
// main.js
import 'font-awesome/css/font-awesome.min.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify, {
iconfont: 'fa4'
})
Install Font Awesome SVG Icons
Add required dependencies.
$ yarn add @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome @fortawesome/free-solid-svg-icons -D
// or
$ npm install @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome @fortawesome/free-solid-svg-icons -D
Then add globally font-awesome-icon
component and set faSvg
as iconfont in Vuetify config.
// main.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fas } from '@fortawesome/free-solid-svg-icons'
Vue.component('font-awesome-icon', FontAwesomeIcon) // Register component globally
library.add(fas) // Include needed icons.
Vue.use(Vuetify, {
iconfont: 'faSvg',
})
Using custom icons
Let's say your application calls for a custom icon in a Vuetify component. Instead of creating a wrapper component or manually defining the specific icon each time a component appears, you can configure it at a global level.
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify, {
iconfont: 'fa',
icons: {
'cancel': 'fas fa-ban',
'menu': 'fas fa-ellipsis-v'
}
})
Let's say your application calls for a custom icon in a Vuetify component. Instead of creating a wrapper component or manually defining the specific icon each time a component appears, you can configure it at a global level.
import Vue from 'vue'
import Vuetify from 'vuetify'
const MY_ICONS = {
'complete': '',
'cancel': '',
'close': '',
'delete': '', // delete (e.g. v-chip close)
'clear': '',
'success': '',
'info': '',
'warning': '',
'error': '',
'prev': '',
'next': '',
'checkboxOn': '',
'checkboxOff': '',
'checkboxIndeterminate': '',
'delimiter': '', // for carousel
'sort': '',
'expand': '',
'menu': '',
'subgroup': '',
'dropdown': '',
'radioOn': '',
'radioOff': '',
'edit': ''
}
Vue.use(Vuetify, {
icons: MY_ICONS
})
Reusable custom icons
Vuetify will automatically merge any icon strings provided into the pool of available presets. This allows you to create custom strings that can be utilized in your application by simply referencing the global icons.
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify, {
iconfont: 'mdi',
icons: {
'product': 'mdi-dropbox',
'support': 'mdi-lifebuoy',
'steam': 'mdi-steam-box',
'pc': 'mdi-desktop-classic',
'xbox': 'mdi-xbox',
'playstation': 'mdi-playstation',
'switch': 'mdi-nintendo-switch'
}
})
This can help ensure your application is always using a specific icon given a provided string. Here are a few ways that you can use <v-icon>
with this system.
<template>
<v-icon>$vuetify.icons.product</v-icon>
<v-icon v-text="'$vuetify.icons.support'"></v-icon>
<v-icon v-html="'$vuetify.icons.steam'"></v-icon>
<v-icon v-text="platform"></v-icon>
</template>
<script>
export default {
data: () => ({
user: {
name: 'John Leider',
platform: 'pc'
}
}),
computed: {
platform () {
return '$vuetify.icons.' + this.user.platform
}
}
}
</script>
Custom components
You can utilize the same icon strings in your own custom components. Any time $vuetify.icons is passed in through v-text, v-html or as text, <v-icon>
will look up that specified value. This allows you to create customized solutions that are easy to build and easy to manage.
<template>
<div class="my-component">
<v-icon v-text="icon"></v-icon>
<slot></slot>
</div>
</template>
<script>
export default {
props: {
icon: {
type: String,
default: '$vuetify.icons.cancel'
}
}
}
</script>
Custom Font Awesome Pro Icons
You can utilize component icons with Font Awesome Pro to select individual icon weights:
import Vue from 'vue'
import Vuetify from 'vuetify'
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faBars } from '@fortawesome/pro-light-svg-icons'
import { faVuejs } from '@fortawesome/free-brands-svg-icons'
Vue.component('font-awesome-icon', FontAwesomeIcon)
library.add(faBars, faVuejs)
Vue.use(Vuetify, {
icons: {
// set menu to light (default is solid)
'menu': {
component: FontAwesomeIcon,
props: {
icon: ['fal', 'bars']
}
},
// reusable custom icon
'vuejs': {
component: FontAwesomeIcon,
props: {
icon: ['fab', 'vuejs']
}
}
}
})
Component icons
Instead of provided icon fonts presets you can use your own component icons. You also can switch icons that are used in Vuetify component with your own.
import Vue from 'vue'
import Vuetify from 'vuetify'
import IconComponent from './IconComponent.vue'
Vue.use(Vuetify, {
icons: {
'product': {
component: IconComponent, // you can use string here if component is registered globally
props: { // pass props to your component if needed
name: 'product'
}
}
}
})
If you want your SVG icon to inherit colors and scale correctly - be sure add the following css to it:
.your-svg-icon
fill: currentColor