Vuetify: [Bug Report] v-checkbox not rendering

[marijnhurkens]

Versions and Environment

Vuetify: 1.0.0-beta.1
Vue: 2.5.13
Browsers: Chrome 63.0.3239.84
OS: Windows 10

Steps to reproduce

Imported Vuetify through:

import 'vuetify/dist/vuetify.min.css'
import Vuetify from 'vuetify'
Vue.use(Vuetify)

In the login component I use:

 <!-- Remember Me -->
 <v-flex>
    <v-checkbox label="Remember me" v-model="form.remember"></v-checkbox>
</v-flex>

Expected Behavior

A material design checkbox is rendered.

Actual Behavior

The checkbox doesn't render, instead the text "check_box_outline_blank" is shown and after clicking the text "check_box" is shown.

Reproduction Link

https://codepen.io/

Other comments

What am I missing, all Codepen examples I can find render just fine.

[jacekkarczmarczyk]

Probably you didn't load Material Icons, see https://vuetifyjs.com/vuetify/quick-start for reference or provide codepen showing your problem

[marijnhurkens]

Thanks, I didn't include those.

[joemsak]

I have the exact same problem happening actually, while using v-select with multiple

And I am pulling in material icons as instructed:

<link rel="stylesheet" media="screen" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700\|Material+Icons" />

icons are working for the select dropdown and deletable chips

[joemsak]

I got it to work right in a plain codepen

https://codepen.io/joemsak/pen/YaGBrj

But I'm using it in a rails 5.1 app with webpacker, and here is the gist of where it's not working right

https://gist.github.com/joemsak/b1b39945770ac54bd14f71813a18a7ae

[joemsak]

UPDATE the issue for me was an unrelated CSS file for legacy areas of the page having a name clash with icon-* classes, which overwrote the font-family, so I had to change my own CSS to have a safer namespace

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord