Javascript 无法在VueJS中创建材质设计（mdi）复选框

在我的应用程序中，我使用了材质设计图标。我这样加载它们：

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

我没有收到任何错误消息，但在呈现页面时，我看到的不是复选框而是一些文本：

我检查了DOM并看到以下内容：

<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>

复选框\u大纲\u空白

---

因此，我看到应用的不是

mdi

theme，而是

materialicons

theme。我不知道如何修理它。我想得到的是，对于选中的复选框，将

mdi复选框标记为outline

class，对于未选中的复选框，将

mdi复选框标记为blank outline

确实需要渲染函数吗？在模板中写东西怎么样？你确定需要渲染功能吗？在你的模板里写东西怎么样？

<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>