MDI 图标大小和颜色

简介

MDI（Material Design Icons）是一套来自 Google 的开源图标库，提供了丰富的图标资源以及对于各种设备的良好适配。在应用开发中，常常会使用到 MDI 图标来提供更加优美的界面。本文将介绍如何在应用中使用 MDI 图标，并修改图标的大小和颜色，以使界面更加美观。

使用 MDI 图标

1. 导入 MDI 图标库

在项目中，使用前需要先导入 MDI 图标库。可以通过以下方式在 HTML 文件中引入：

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

或者在 Vue.js 中，可以通过以下命令安装并导入：

npm install @mdi/font -D

import '@mdi/font/css/materialdesignicons.min.css';

2. 在代码中使用 MDI 图标

在代码中使用 MDI 图标十分简单，只需要在 HTML 中添加对应的类名即可。例如，在 HTML 中添加一个搜索图标，只需要使用以下代码即可：

<span class="mdi mdi-magnify"></span>

其中，mdi 为所有 MDI 图标都需要添加的类名，mdi-magnify 则表示搜索图标。注意，正如上文所述，需要先导入 MDI 图标库，才能在代码中使用。

修改 MDI 图标大小和颜色

1. 修改图标大小

要修改 MDI 图标的大小，可以使用 font-size 属性。例如，下面的代码可以将搜索图标的大小变为 20px：

<span class="mdi mdi-magnify" style="font-size:20px;"></span>

2. 修改图标颜色

要修改 MDI 图标的颜色，可以使用 color 属性。例如，下面的代码可以将搜索图标的颜色变为红色：

<span class="mdi mdi-magnify" style="color:red;"></span>

总结

本文介绍了如何在应用中使用 MDI 图标，并修改图标的大小和颜色。通过合理地使用 MDI 图标，可以让应用界面更加美观，提升用户的使用体验。