更新记录

7.2.96（2023-03-25）

进行了一个与官方版本的同步，上传了示例工程。

7.1.96（2022-12-27）

将Material Design Icons移植到uni-app上的首个版本，保持版本号与官方同步。

平台兼容性

mdi-icon

本插件为非官方插件，原作者为 Pictogrammers 。由于插件作者常年使用Vuetify.js框架进行前端开发，发现该框架使用的Material Design Icons图标库资源丰富拥有7000+图标、风格基本统一、还很易用，后来迁移到uni-app进行小程序开发时一直苦于没有找到跟Material Design Icons比拟的图标库（尽管阿里巴巴图标矢量库等图标库资源远比该库丰富，但里面有着大量样式或使用场景重复或相似的图标），故自己将其移植过来了。

⚠️特别提醒：该仓库使用了官方部署在jsDelivr上的字体，不建议在生产环境使用！！！[查看关于字体文件的问题](#1. 关于字体文件的问题 "查看关于字体文件的问题")

@[toc]

快速上手

本插件包含一个mdi-icon组件，您可以在页面的任何位置使用该组件。

组件属性

使用方法

没怎么用过uni-app，光看开发文档也没看明白，也不知道我搞得对不对。但好像可以用easycom自动引入，或者点点插件详情页右侧的 使用 HBuilderX 导入插件 试试？

关于issue和PR

如果您对图标有好的建议或想法，欢迎前往官方的Github仓库提出，请在提出issue或者pr前仔细阅读官方的README（英文），不阅读文档直接提issue或者PR是非常不礼貌的行为。

如果您在使用本插件时遇到了问题或有什么好的建议，请直接在评论区留言或前往本插件的仓库提交issue或PR。请不要到官方的Github仓库发布关于本插件的issue或pr，本插件为非官方插件，官方不维护本插件，插件作者也不会闲着没事去官方的Github仓库寻找关于插件的issue或PR……（特别是PR！！！）

图标库更新

插件作者尽量保证本插件与官方最新版图标库同步，但由于个人时间精力有限，可能无法及时更新或跳过一些版本。欢迎有志之士一同维护本插件。

如果您需要自行更新图标库，本项目中包含了一个修改版的MaterialDesign-Webfont项目，项目位于@/uni_modules/mdi-icon/components/mdi-icon/MaterialDesign-Webfont，如果DCloud官方未将Git相关的内容删除的话，您可以直接从该项目里将最新版的MaterialDesign-Webfont拉取下来并合并（只保留本项目中MaterialDesign-Webfont/scss/_variables.scss的第10行$mdi-font-path变量，其它内容不保留，否则图标将不可用）。

⚠️特别提醒：如果您对@/uni_modules/mdi-icon/components/mdi-icon/MaterialDesign-Webfont里的内容还做出了其它修改，请记得一并保留。

⚠️特别提醒+1：如果Git相关的内容被删除了，您也可以重新在@/uni_modules/mdi-icon/components/mdi-icon/MaterialDesign-Webfont创建Git，但请保留MaterialDesign-Webfont/scss/_variables.scss的第10行$mdi-font-path变量。

其它问题

1. 关于字体文件的问题

由于小程序不支持使用本地字体，且为了保持本插件使用的图标库与官方最新版图标库版本，不适用将字体文件编码成Base64格式文本包含在样式表文件中，插件作者亦没钱自己搞公共服务器。因此本插件使用了官方部署在jsDelivr上的字体，jsDelivr在大陆的访问速度尚可，但考虑到项目风险，建议有风控需求的项目将字体文件自行部署到自有服务器上。

⚠️特别提醒：当您对@/uni_modules/文件夹里的插件做出修改时，您应当确保不再更新被修改过的插件，否则您做出的修改可能会被覆盖掉！

将字体文件部署到自有服务器

字体文件存放在@/uni_modules/mdi-icon/components/mdi-icon/MaterialDesign-Webfont/fonts文件夹中，与您所使用的插件版本对应，将该目录下的所有文件部署到自有服务器的同一目录即可。

使用自有服务器上的字体文件

将@/uni_modules/mdi-icon/components/mdi-icon/MaterialDesign-Webfont/scss/_variables.scss第10行的$mdi-font-path变量修改为您部署在自有服务器上的字体文件URL所在的目录。目录不要以/结尾！

例如：您部署在自有服务器上的四个字体文件的URL分别是：

• //example.com/my-font/materialdesignicons-webfont.eot
• //example.com/my-font/materialdesignicons-webfont.ttf
• //example.com/my-font/materialdesignicons-webfont.woff
• //example.com/my-font/materialdesignicons-webfont.woff2

那么您需要将@/uni_modules/mdi-icon/components/mdi-icon/MaterialDesign-Webfont/scss/_variables.scss第10行的$mdi-font-path变量修改为//example.com/my-font。

自行将字体文件编码成Base64格式文本包含在样式表文件中

您可以将@/uni_modules/mdi-icon/components/mdi-icon/MaterialDesign-Webfont/fonts文件夹中的文件分别编码成Base64格式文本，并将其添加到@/uni_modules/mdi-icon/components/mdi-icon/MaterialDesign-Webfont/scss/_path.scss的对应位置。

⚠️特别提醒：当您将自行将字体文件编码成Base64格式文本包含在样式表文件中后，图标库将无法被更新。不过您可以自行通过官方仓库获取到新版图标库的字体文件并将其重新编码成Base64格式文本包含在样式表文件中，并将官方仓库MaterialDesign-Webfont的/scss/_variables.scss文件中的$mdi-icons变量覆盖到@/uni_modules/mdi-icon/components/mdi-icon/MaterialDesign-Webfont/scss/_variables.scss文件中的$mdi-icons变量。

2. 旧版本插件无法显示新版本图标库中新增的图标的问题

插件版本与图标库版本是对应的，而Material Design Icons里的图标库永远是最新的，如果您在Material Design Icons里寻找到了一个中意的图标，并将其使用在了项目中，却发现在字体文件加载完成后仍然无法显示，那么您可能恰好用了一个新版图标库中新增的图标。

这是一个非常容易理解的问题，更新插件（如果有新版本）或者按照上文“图标库更新”里的方式更新图标库即可。

版权信息

本插件中包含的Material Design Icons部分遵循Pictogrammers Free License协议，该协议表示：这个图标集由 Pictogrammers 提供，是免费的、开源的，并且对 GPL 友好。您可以在商业项目、开源项目或其它任何项目中使用它。

本插件的mdi-icon组件部分遵循MIT协议，该组件遵循MIT协议表示：这个组件是免费的、开源的。您可以在商业项目、开源项目或其它任何项目中使用它。

本插件的示例部分遵循GPL-2.0协议，示例部分遵循GPL-2.0协议表示：示例部分是开源的。您复制、使用、修改示例部分的项目必须同样遵循GPL协议进行开源。

⚠️特别注明：本插件的示例部分是免费的。本插件的mdi-icon组件部分不算做示例，您可以自由使用它。只要您的项目未使用到本插件的示例部分，您就不受GPL-2.0协议的约束。