材料设计图标开源项目安装与配置指南-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00181/article/details/147085166

材料设计图标开源项目安装与配置指南

material-design-icons Material Design icons by Google (Material Symbols) 项目地址: https://gitcode.com/gh_mirrors/ma/material-design-icons

1. 项目基础介绍

材料设计图标是由谷歌提供的一套开源图标库，包含了Material Design风格的图标资源。这些图标被广泛用于Web和移动应用程序中，以保持设计的一致性和简洁性。本项目主要包括两种类型的图标：Material Symbols和Material Icons。Material Symbols是基于变量字体技术的最新图标集，而Material Icons是经典的图标集，但自2022年起已停止更新。

主要编程语言：本项目主要使用HTML/CSS进行Web端图标样式的展示，而对于字体文件，则使用了变量字体技术。

2. 项目使用的关键技术和框架

变量字体技术：Material Symbols使用了变量字体技术，允许在网页中通过CSS调整图标的大小、粗细、填充和其他样式。
Web字体链接：通过链接到Google Fonts上的字体文件，简化了图标字体在Web项目中的集成过程。
Apache License 2.0：本项目遵循Apache License 2.0开源协议，允许用户自由使用、修改和分享这些图标。

3. 项目安装和配置的准备工作及详细步骤

准备工作：

确保你的计算机上安装了Git，用于克隆和更新项目。
准备一个文本编辑器，用于编辑项目文件。
对于Web项目，需要一个本地或远程服务器来展示图标。

安装步骤：

克隆项目

打开命令行工具，执行以下命令来克隆项目到本地：
```
git clone https://github.com/google/material-design-icons.git
```
选择图标类型

根据你的需求选择Material Symbols或Material Icons。两者都可以通过链接到Google Fonts上的CSS文件来使用。

集成图标到你的Web项目

将以下代码添加到你的HTML文件的<head>部分，以引入Material Symbols：

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">

或者，如果你需要Material Icons：

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

使用图标

在HTML文件中，你可以通过指定相应的类来使用图标：
```
<i class="material-icons">add</i> 
<i class="material-symbols-outlined">add</i> 
```
请参考项目文档来了解如何使用不同样式和大小。
自定义图标

如果需要，你可以根据项目文档中的指导，使用变量字体技术来自定义图标的大小、粗细、填充等。