Vuetify's fab button icon is not centered vertically

Question

I can't get vuetify's fab button to be centered vertically.

Here is my usage, noting special out of the ordinary.

<v-btn 
    color="primary" 
    fab 
    small >
    <v-icon>print</v-icon>                  
</v-btn>

Here is my main.js file

import Vue from "vue";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";
import "material-design-icons/iconfont/material-icons.css";
import "typeface-roboto/index.css";
Vue.use(Vuetify);
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

this is the output

I am using Vue 2.5.16 and Vuetify 1.1.3 versions

i.e I haven't added styles or any external other css

---

Update: i found a workaround by adding height:auto on v-icon

<v-icon style="height:auto;">print</v-icon>

but still it isn't a solution.

Answer 1

In my case it is because the order of CSS import

FAB icon not centered vertically

Add information about load Google font before Vuetify css

import "material-design-icons-iconfont/dist/material-design-icons.css";
import "vuetify/dist/vuetify.min.css";