[Vuejs]-Vuetify3 v-radio is transparent

by

1👍

You probably figured it out by now, but anyway:

This usually happens when you have not installed any icon font, i.e. Material Design Icons or Font Awesome.

Compare the two snippets, first one doesn’t have icons, second one does:

const { createApp, ref } = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify()
createApp({}).use(vuetify).mount('#app')
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3.1.4/dist/vuetify.min.css" />
<div id="app" class="d-flex justify-center">
  <v-app>
    <v-checkbox label="checkbox without icons"/>
  </v-app>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.4/dist/vuetify.min.js"></script>
const { createApp, ref } = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify()
createApp({}).use(vuetify).mount('#app')
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3.1.6/dist/vuetify.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app" class="d-flex justify-center">
  <v-app>
    <v-checkbox label="checkbox with icons"/>
  </v-app>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.6/dist/vuetify.min.js"></script>

The documentation for icon fonts will provide more details.

👤Moritz Ringler

Leave a comment