Unable to create material design (mdi) checkbox in VueJS

737 Views Asked by At

In my application I'm using material design icons. I load them like so:

<link href="https://cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css" rel="stylesheet">

It works good in many parts of the application, but it does not work with checkboxes. This is how I create checkboxes in one of my methods:

return this.$createElement(VCheckbox, {

});

I do not get any error messages, but instead of checkboxes I see some text, when page is rendered:

enter image description here

I inspected the DOM and see this:

<div class="v-input__slot">
    <div class="v-input--selection-controls__input">
        <input aria-checked="false" role="checkbox" type="checkbox" value="">
        <div class="v-input--selection-controls__ripple"></div>
        <i aria-hidden="true" class="v-icon material-icons theme--light">check_box_outline_blank</i>
    </div>
</div>

So, I see that instead of mdi theme material-icons theme is applied. I do not know how to fix it. What I want to get, is to have mdi-checkbox-marked-outline class for checked checkboxes and mdi-checkbox-blank-outline for unchecked.

0

There are 0 best solutions below