CODEWITHSUNDEEP
cssvue.jsvuetify.js
spiffytech
spiffytech

Reputation: 6642

Vuetify icons not centered inside button

I'm trying to use a Floating Action Button in Vuetify, but the icon doesn't line up with the button:

android-screenshot

Here's how I installed Vuetify:

import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import 'babel-polyfill'  // Required by Vuetify for IE11-era browsers

Vue.use(Vuetify)

Here's a CodePen showing what I'm doing: https://codepen.io/anon/pen/vrXrYg?editors=1000

<div id="app">
  <v-app>
    <v-toolbar color="indigo" dark fixed app>
      <v-toolbar-title>My App</v-toolbar-title>
    </v-toolbar>
    <v-content>
      <v-container fluid fill-height>
          <div id="my-vue-component">
            <v-btn
                   fixed
                   fab
                   bottom
                   right
                   color="pink"
                   >
              <v-icon>
                microphone_off
              </v-icon>
            </v-btn>
          </div>  
        </v-container>
    </v-content>
  </v-app>
</div>

Upvotes: 0

Views: 4583

Answers (2)

&#214;NDER ŞAHİN
&#214;NDER ŞAHİN

Reputation: 31

I think the icon name is not suitable.You should get reference from https://material.io/tools/icons/ The icon name should be 'mic_off' instead 'microphone_off' Also, Vuetify document says that Material Design Icons supported with mdi- prefix.

Upvotes: 0

Second Technologies
Second Technologies

Reputation: 376

The icon you are looking for is simply called mic in the official material design icons doc. Changing from microphone_off to mic did the trick in your codepen.

see https://material.io/tools/icons/?icon=mic&style=baseline

Upvotes: 4

Related Questions