如何在Vuetify应用程序中使用大纲图标？
如何在Vuetify应用程序中使用大纲图标？
提问于 2018-07-17 07:21:54
<v-btn outline large fab color="indigo">
<v-icon>edit</v-icon>
</v-btn>在vuetify.js文档中，示例只使用按钮勾画图标。但我的要求是不使用按钮就能得到轮廓图标。
回答 4
Stack Overflow用户
回答已采纳
发布于 2018-07-17 08:02:48
您只需要添加CSS就可以做到这一点。
就像这样：
<v-icon class="outlined">edit</v-icon>CSS
.v-icon.outlined {
border: 1px solid currentColor;
border-radius:50%;
height: 56px;
width: 56px;
}Stack Overflow用户
发布于 2021-03-09 14:10:10
@Toodoo以上的解决方案是最简单和最有效的，但无论出于什么原因，我都不适用。
我碰到了这优秀的字体，它直接来源于材料，可以很容易地导入到任何组件中：
<style lang="scss" scoped>
@import '~material-icon-font/dist/Material-Icons.css';
.material-icons { font-family: 'Material Icons Outline'}
</style>..。瞧，不需要创建任何自定义类，所有图标都会神奇地被勾画出来(更多选项见文档，并给这个家伙一个明星！)
Stack Overflow用户
发布于 2021-07-26 22:18:08
首先，确保在index.html文件中下载材料设计图标(包括概述)：
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined" />现在，您可以简单地将material-icons-outlined类添加到v-icon中，从而使用概述的图标。
示例：
<v-icon class="material-icons-outlined">
file_upload
</v-icon>如果您需要在:prepend-icon、:append-icon等中使用概述的图标，请使用相应的插槽：
<v-autocomplete
...
>
<template v-slot:prepend>
<v-icon class="material-icons-outlined">
file_upload
</v-icon>
</template>
</v-autocomplete>后者在Vuetify中使用了几乎所有形式的输入。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51375462
复制相关文章
相似问题
腾讯云开发者
