Vuetify: [Bug Report] local material icon dislocation

[lichnow]

Versions and Environment

Vuetify: 1.0.0-alpha.3
Vue: 2.5.13
Browsers: Chrome 63.0.3239.84
OS: Mac OS 10.13.2

Steps to reproduce

In an icon button with fab small
If use google.com url link of material icon,every thing is work fine like codepen link
But when link the icon font under local by import 'material-design-icons/iconfont/material-icons.css'
will dislocation position

Expected Behavior

local icon font show small as url link font in fab small icon button

Actual Behavior

button dislocation position

Reproduction Link

https://codepen.io/anon/pen/WdRLaP

[KaelWD]

The codepen works, and is no different using https://unpkg.com/[email protected]/iconfont/material-icons.css

Please create a reproduction that will actually show the error, such as a github repo.

[eduardo76]

I had the same problem.
When using import 'material-design-icons/iconfont/material-icons.css' the icons gets displaced.

Wrong

index.html
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700' rel="stylesheet" type="text/css">
main.js
import 'material-design-icons/iconfont/material-icons.css'

Right

index.html
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
main.js
//import 'material-design-icons/iconfont/material-icons.css'

[philwolstenholme]

This is a CSS cascade/specificity issue.

If you load the the local Material Icons CSS before loading Vuetify's CSS, then the icon will be displayed as inline-block (from .material-icons), and this will cause the icon to be positioned at the top of the FAB button.

If you load the local Material Icons CSS after loading Vuetify's CSS, the the icon gets displayed as inline-flex (from .icon), and the icon is correctly positioned.

[wobsoriano]

Thanks @philwolstenholme ! I just added this to my vue files with misplaced icons in buttons.

.icon {
  display: inline-flex !important;
}

[PaulPatena]

@philwolstenholme, the inverse of your suggestion fixed it for me, including Material Icons CSS before Vuetify CSS is correctly rendering.

I'm using the following {"material-design-icons-iconfont": "^3.0.3", "vue": "^2.5.2", "vue-router": "^3.0.1","vuetify": "^1.0.0"}

[NikoNagy]

@philwolstenholme Thanks, you saved me hours !

@PaulPatena Thanks for the screens 👍