Vuetify comes bootstrapped with support for Material Design Icons, Material Icons, Font Awesome 4 and Font Awesome 5. By default, applications will default to use Material Design Icons.

Usage

In order to change your font library, add the iconfont option during instantiation.

content_copy

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 Design Icons

content_copy

This is the default icon font for Vuetify. You will need to import the library into your application.

content_copy

Install Material Design Icons (JS SVG)

Use the SVG Path's as designated in @mdi/js. This is the recommended installation when optimizing your application for production. You ONLY need to include this if you plan on using more than the default icons.

content_copy

Specify the mdiSvg iconfont:

content_copy

You can custom import only the icons you use granting a much smaller bundle size.

content_copy

Install Material Icons

Installation is the same as the above. For projects without a build process, it is recommended to import the icons from CDN

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

content_copy

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.

content_copy

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:

To install locally you can pull in the Free version of FontAwesome using your preferred package manager:

content_copy

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.

content_copy

Install Font Awesome 4 Icons

Same as above. Installing FontAwesome through cdn is the easiest way to check it out within your project:

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.

content_copy

Don't forget, your project will need to recognize css. If you are using webpack, install and setup the css loader.

content_copy

Install Font Awesome SVG Icons

Add required dependencies.

content_copy

Then add globally font-awesome-icon component and set faSvg as iconfont in Vuetify config.

content_copy

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.

content_copy

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.

content_copy

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.

content_copy

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.

content_copy

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.

content_copy

Custom Font Awesome Pro Icons

You can utilize component icons with Font Awesome Pro to select individual icon weights:

content_copy

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.

content_copy

If you want your SVG icon to inherit colors and scale correctly - be sure add the following css to it:

content_copy
Edit this page | language on Github