How to install icon fonts in vuetify vue application

This is a quick tutorial on how we can install icon fonts for material icons and font awesome. 

Although vuetify uses material design icons, that might not be sufficient all the time so we need to use some other library for it.

We can simply install a font by including the specified icon library CDN. For this, go to the project directory and inside it, you can see the index.html file under the public folder.  

Here, add the material icons and font awesome icon CDN link as below.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.x/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css">

After adding this, we can simply use icons for e.g: 

From font awesome, simply use the fa- prefixed on icon name:

<v-icon left color="blue" size="50">fa-twitter</v-icon>

For google fonts, go to the google font and click the icon, we can see the icon font name similar as below, simply use the name.

<v-icon left color="blue" size="50">logout</v-icon>

Read More