如何在 vuetify 标签 <v-icon></v-icon> 中使用圆形图标？

Posted 2023-02-22

【中文标题】如何在 vuetify 标签 <v-icon></v-icon> 中使用圆形图标？

【英文标题】：How to use rounded icons in vuetify tag <v-icon></v-icon>?

【发布时间】：2021-02-09 00:52:03

【问题描述】：

我想在 vuetify 附带的 v-icon 标签中使用圆形材质图标。 我在***上尝试了一切......

<v-icon>announcement</v-icon>

【问题讨论】：

为什么不<v-icon class="icon-rounded> 和.icon-rounded border-radius: 50%; ？为此，您可能必须将“公告”移出<v-icon>

究竟什么是“圆形图标”？也许您正在寻找圆形图标按钮vuetifyjs.com/en/components/buttons 或者带有图标vuetifyjs.com/en/components/chips 的圆形芯片？

使用 v-icon 标签，我正在使用谷歌的材料图标。我可以添加一种称为圆形的样式。使用 v-icon 我正在使用常规的。在标签中，图标被插入，并以其名称命名。 material.io/resources/icons/?style=round

【参考方案1】：

这里提到：How to use the new Material Design Icon themes: Outlined, Rounded, Two-Tone and Sharp?

您可以在 index.html 文件中添加 Material+Icons+Round 字体系列：

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

您现在可以通过将“material-icons-round”类添加到您的 v-icon 来使您的图标变圆：

<v-icon class='material-icons-round'>east</v-icon>

刚刚使用 Vuejs 2.x 和 Vuetify 的最后一个可用版本进行了尝试——截至 12 月。 2020 - 这很简单！希望对您有所帮助！

【讨论】：

谢谢伙计，这就是解决方案！ :)

【参考方案2】：

将v-btn 与fab 属性一起使用

【讨论】：

fab 属性仅将按钮转换为圆形，我也可以使用 v-btn 的 icon 属性来实现。