Vuetify — Icons

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Material Design Icons

Vuetify comes with many icons.

We can install Material Design icons by running:

npm install material-design-icons-iconfont -D

Then in src/plugins/vuetify.js , we add:

import 'material-design-icons-iconfont/dist/material-design-icons.css'

And then we can add them with the v-icon component:

<template>
  <v-container class="grey lighten-5">
    <v-row>
      <v-col>
        <v-container fluid>
          <v-row justify="space-around" class="mb-2">
            <span class="group pa-2">
              <v-icon>home</v-icon>
              <v-icon>event</v-icon>
              <v-icon>info</v-icon>
            </span>
          </v-row>
        </v-container>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

Font Awesome Icons

We can install Font Awesome icons by running:

npm install @fortawesome/fontawesome-free -D

Then in src/plugins/vuetify.js , we add:

import '@fortawesome/fontawesome-free/css/all.css'

so we can use the icons.

Then we can use it by writing:

<template>
  <v-container class="grey lighten-5">
    <v-row>
      <v-col>
        <v-row align="center" justify="space-around">
          <v-icon>fas fa-lock</v-icon>
          <v-icon>fas fa-search</v-icon>
          <v-icon>fas fa-list</v-icon>
          <v-icon>fas fa-edit</v-icon>
          <v-icon>fas fa-tachometer-alt</v-icon>
          <v-icon>fas fa-circle-notch fa-spin</v-icon>
        </v-row>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

Button Icons

We can add icons to buttons.

For example, we can write:

<template>
  <v-container class="grey lighten-5">
    <v-row>
      <v-col>
        <div>
          <v-btn class="ma-2" color="primary" dark>
            Accept
            <v-icon dark right>mdi-checkbox-marked-circle</v-icon>
          </v-btn>

          <v-btn class="ma-2" color="red" dark>
            Decline
            <v-icon dark right>mdi-cancel</v-icon>
          </v-btn>

          <v-btn class="ma-2" dark>
            <v-icon dark left>mdi-minus_circle</v-icon>Cancel
          </v-btn>
        </div>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

to add an icon beside the icon text.

Clickable

We can bind to any click event with v-icon .

For example, we can write:

<template>
  <v-container class="grey lighten-5">
    <v-row>
      <v-col>
        <v-card>
          <v-toolbar color="pink" dark dense flat>
            <v-toolbar-title class="body-2">Upcoming Changes</v-toolbar-title>
          </v-toolbar>
          <v-card-text>Lorem ipsum.</v-card-text>

          <v-card-actions>
            <v-spacer></v-spacer>
            <v-icon large @click="next">mdi-chevron-right</v-icon>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
  methods: {
    next() {
      alert("You clicked next");
    },
  },
};
</script>

We set the @click directive to next so that the next method will be called when we click on the icon.

Conclusion

We can add Material Design and Font Awesome icons to our app.

Also, Vuetify comes with built-in icons.