Vuetify: [Bug Report] Vuetify icons self hosted not working properly

Created on 4 Mar 2018 · 7Comments · Source: vuetifyjs/vuetify

Versions and Environment

Vuetify: 1.0.0
Vue: 2.5.0
Browsers: Chrome 64.0.3282.186
OS: Windows 10

Steps to reproduce

If you simply run the file it contains a v-icon with icons not aligned properly

Expected Behavior

Plus icon to be adjusted in the center.

Actual Behavior

Plus icon is stuck to the top.

Reproduction Link

https://github.com/Tabrizian/vuetify-selfhosted-icons

vuetify selfhosted icons

layer 8 issue

Source

Tabrizian

👍2

Most helpful comment

The icon font needs to be loaded above the rest of vuetify's CSS or the overrides won't work properly.

KaelWD on 4 Mar 2018

👍5

All 7 comments

This is happening with me as well. Although I am importing icons directly in my main Vue template, like this:

<template>
  ...
</template>

<script>
  ...
</script>

<style>
    @import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons';
</style>

preeteshjain on 4 Mar 2018

👍2 🎉1

The icon font needs to be loaded above the rest of vuetify's CSS or the overrides won't work properly.

KaelWD on 4 Mar 2018

👍5

@preeteshjain I import icons in my main Vue ,I use vue-cli ,that is in App.vue, and it works

zzAutumn on 20 May 2018

@KaelWD I think we need to reopen this. Cause I have this bug even with correct ordering of imports.
Maybe the source of the problem is that I have many vendors chunks?
Anyway, display: inline-flex !important; in .v-icon can solve the issue
screenshot_20181031_093510
screenshot_20181031_093541
screenshot_20181031_093826