In vuetify, radio is not shown

Question

With vuetify, after adding a simple radio, the radio is not shown, only the labels shown.

---

Code

template:

<v-app height="100%">
  <v-radio-group v-model="radios">
    <v-radio label="Radio 1" value="radio-1"></v-radio>
    <v-radio label="Radio 2" value="radio-2"></v-radio>
  </v-radio-group>
</v-app>

script:

<script>
  export default {
    data() {
      return {
        radios: 'radio-1',
      }
    },
  }
</script>

---

Any idea?

---

@Update - Solution

It's the css file issue, in index.html, it's fixed after changing following line

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">

to:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">

And, I also run yarn add @mdi/font -D to install the font file, which is specified in src/plugins/vuetify.js (not sure is this necessary though):

export default new Vuetify({
  icons: {
    iconfont: 'mdi',
  },
});

BTW:

• I figured this out by re-add the vuetify plugin, and check git diff.
• And, it seems needs to restart the app to see the difference? Stop the application first, then npm start or yarn start.
• I was misled by the guide from vuetify's github's readme file.

Answer 1

The code you have shown here is correct. I checked it on my project. It shows the radio buttons just like:

So you issue is somewhere else.