问题标签 [material-design-icons]

我在这里和这里找不到字母表中每个字母的任何有角度的材料图标， 特别是“R”、“A”和“V”。

我想要下面的图标。一个简单的圆圈，里面有一个大写字母。

我只剪了这个。

我现在建议在MaterialDesign Git hub 中使用它。

更新

我搜索希望找到，我找到了我喜欢的一个，但我想要的是一个 SVG，而不是 png、jpg 等。

而这个是android 而不是 Angular-material 图标。

我在我的 vue 项目中使用 materialdesignicons。

我有一些动态创建的图标：

当我通过 (npm run build) 为生产构建时，我收到以下错误：

该文件大小很大，因为它包含每个图标，无论它是否正在使用。有没有办法通过只打包使用的特定图标来缩小文件大小。我应该使用不同的软件包吗？警告：该项目是离线托管的，因此我需要将字体直接包含在我的项目中。

我查看了 vue-material-design-icons 但它看起来可能不适用于动态图标名称，并且它没有说明整体文件大小/性能。

我也看过这里，但是单击“尺寸警告”链接会将我带到未填写 Vue 部分的页面 https://dev.materialdesignicons.com/getting-started/webfont

我非常愿意使用Material Design 图标，因为它们有更多面向 IT 的图标，所以它让事情变得更容易。我想实现类似于 FontAwesome 的 Fixed Width 功能的东西，它确保图标后有一个均匀的空间，保持一致。

图标当前的外观：

我希望图标如何间隔：

然而，据我目前所知，MDI 不提供此功能（或者我错过了它），那么有哪些方法可以有效地实现类似的目标，而无需修改!important或设置不必要的边距？

商店信息 CSS：

商店信息 HTML：

在此先感谢，并且值得注意的是，我不是一个前端人员，所以如果您看到一些看起来很奇怪的东西，请随时提及！

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

它适用于应用程序的许多部分，但不适用于复选框。这就是我在其中一种方法中创建复选框的方式：

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

我检查了 DOM 并看到了这个：

所以，我看到应用了主题而不是mdi主题material-icons。我不知道如何解决它。我想要得到的是mdi-checkbox-marked-outline为选中的复选框和未选中的复选框设置课程mdi-checkbox-blank-outline。

我目前正在使用默认的“Material Design Icons”构建一个 vuetifyjs-app。在生产版本中，我只使用了这种字体的 2 个图标（由 vuetify-component 芯片使用）。

按照建议，我将完整的图标字体包含在

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">

但是生产构建这迫使用户下载几乎 0.5MB 的数据，仅用于 2 个图标。有没有办法：

• 在 CDN 请求中仅包含所需的图标或
• 使用 Tree-Shaking 在主 CSS 文件中只包含需要的图标？（我正在使用 parcel.js 构建器）

我遇到了 Vuetify 中的图标无法正确显示的问题，例如下面是Vuetify 扩展面板。我已经尝试过这个问题vuetify icon not displayed中的解决方案，但它们对我不起作用。您可以在下面看到 chevron-down 图标显示为$vuetify.icons.expand。我已经尝试过导入 @mdi/font 这对我没有任何作用......这是我正在使用的代码：

导入material-design-icons-iconfont/dist/material-design-icons.css，将图标更改为一些奇怪的图标。

请让我知道可能是什么问题以及我还能尝试什么！

我正在设置一个评级组件，并希望能够传递一个 mdi 图标，例如“星”，该图标将填充空/半/全图标道具。

情况1：

使用星形 mdi 图标可以很好地工作，如 heart screenshot 和codepan 所示 。

半星正确显示，半空部分在空部分周围有轮廓。

凯斯 2：

带有心形图标，它显示半个心形，但空的一半周围没有轮廓，如屏幕截图 Codepen 所示

凯3：

如果我使用任何其他 mdi 图标，似乎没有半个版本，所以如果半分的话根本看不到星星。密码笔

我如何编码该组件将接收任何 mdi 图标，并像案例 1 一样呈现评级视图。右侧空白部分的半星概述，并支持没有“半”版本的图标？

我想提高使用Vuetify构建的 Web 应用程序的Google Lighthouse分数。

为了提高性能得分，我一直在尝试摆脱诊断：

确保在 webfont 加载期间文本保持可见

利用 font-display CSS 功能确保在加载 webfonts 时文本是用户可见的。学到更多

网址：https ://cdn.jsdelivr.net/npm/@mdi/font@latest/fonts/materialdesignicons-webfont.woff2?v= 4.5.95 (cdn.jsdelivr.net)

这个结果也是Roboto通过https://fonts.googleapis.comdisplay=swap安装的，当我添加到如下链接时它消失了：

但是，显然，添加到MaterialDesignIcons css 文件中没有任何区别，例如：display=swap

这样做，诊断项目不会消失。我应该如何加载materialdesignicons.min.css，以便在 webfont 加载期间文本保持可见？

我一直在 laravel 框架上开发类似 Twitter 或 Instagram 的 SNS 应用程序。我将 Vue.js 和 Vuetify 添加到我的项目中。当我使用 v-icon 时，它没有显示，而是显示如下的空框。

在铬：

在 Firefox 中：

这是什么？这是我的代码。

他们怎么了？老实说，我已经面对这个问题差不多一个星期了。
我尝试了一些东西，但有时它甚至没有显示任何东西，或者有时出现了另一个问题。我只想知道如何正确显示材料设计图标。有谁知道这个问题的原因或解决方案？谢谢。

看起来 mdi 在 Web 组件中不起作用，还是我错过了什么？

我想开发一个封装其依赖项的 Web 组件，将链接添加到父文档的工作原理，但它违反了初衷。

https://codepen.io/Jamesgt/pen/MWwvJaw