📌  相关文章
📜  材料设计精简版-图标(1)

📅  最后修改于: 2023-12-03 15:40:20.560000             🧑  作者: Mango

材料设计精简版-图标

材料设计精简版-图标是一套精美的图标集合，由 Google 设计师精心制作。该图标集合可免费在 Material Design Icons 网站上下载使用，也可通过 Android Studio、Webfont 和 Vue.js 等工具或库方便地引入到项目中。

特点
  • 包含大量的图标，涵盖了几乎所有常用的应用场景，如人物、商品、家具、动物、交通和天气等等。
  • 可通过 Material Design Icons 网站轻松搜索、筛选和预览所需的图标，同时提供不同格式及大小的下载链接。
  • 每个图标都提供了清晰的矢量图形格式，可保证在不同分辨率和设备上呈现的清晰度和适应性。
使用
引入方式
  1. 通过 Material Design Icons 网站下载所需的图标，然后将其保存在工程的 drawable、assets 等目录下。
  2. 在布局文件中通过 ImageView、ImageButton 等控件引用该图标，如下所示：
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_account_circle"
    android:contentDescription="@string/icon_description" />
使用工具或库
  1. 在 Android Studio 中选择项目中的 res 目录，右键单击然后选择 New - Vector Asset，然后从 Material Icon 选项卡中选择所需的图标即可。
  2. 在 Web 应用中通过引入 Webfont 方式使用，如下所示：
<head>
  <link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css">
</head>
<body>
  <i class="mdi mdi-account"></i>
</body>
  1. 在 Vue.js 应用中通过引入 vue-material-design-icons 库，如下所示：
<template>
  <div>
    <md-icon name="account"></md-icon>
  </div>
</template>

<script>
import { MdIcon } from 'vue-material-design-icons';

export default {
  components: {
    MdIcon,
  },
};
</script>
示例

Material Design Icons Material Design Icons Material Design Icons Material Design Icons Material Design Icons

以上示例展示了 Material Design Icons 中的一些图标，包括人物、购物、天气、交通等等。这些图标都是精美而简洁的，既适合于现代风格的应用，也适合于卡通风格的应用。通过 Material Design Icons 可以大大提高开发效率，并使应用具备更好的用户体验。