Material Design 是谷歌推出的一组界面设计规范，旨在提供一致的用户体验和视觉效果。其中，Material Design 图标库是它的一个重要组成部分，提供了丰富、标准化的图标资源，让我们在开发 Web 和移动端应用时更容易实现一致的设计风格和交互效果。
图标库的特点
- 包含丰富的图标资源：Material Design 图标库包含了 1000 多个图标，覆盖了各种应用场景，例如通信、媒体、地图、文件、通知等等。
- 保持一致的设计风格：所有的图标都采用了 Material Design 的视觉规范，比如圆角矩形、阴影等，保证了在不同尺寸和分辨率下的一致性。
- 支持多种格式：图标库提供了多种格式的资源，除了常见的 SVG 和 PNG 外，还包括了 WebP、CSS 等，方便在不同的平台和环境中使用。
- 易于集成和使用：图标库提供了详细的文档和示例代码，可以很容易地集成到现有的项目中，也方便地进行自定义和扩展。
使用示例
基本使用
在 HTML 文件中引入 Material Design 图标库的 CSS 样式和 SVG 图标资源：
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <i class="material-icons">face</i>
其中，<link> 标签用于引入谷歌字体库的 Material Icons 字体，<i> 标签则用于输出一个图标，其中的 face 是图标名称。可以根据需要调整 <i> 标签的样式属性来改变图标的尺寸、颜色、位置等等。
自定义图标
除了使用预置的图标外，Material Design 图标库也支持自定义图标。可以使用图标缩略图生成器（Material Icon Generator）来生成单色的、主题色的或带阴影的自定义图标。
生成的图标可以直接保存为 SVG 文件，然后使用类似上面的方式在 HTML 中引用。
<svg class="icon" viewBox="0 0 24 24"> <path d="M12 2a6.995 6.995 0 0 0-6.768 8.926c.264.91.66 1.769 1.162 2.569C5.583 16.179 5 17.311 5 18.5 5 20.433 6.567 22 8.5 22S12 20.433 12 18.5c0-.35-.046-.692-.125-1.025 2.688-1.442 4.125-3.447 4.125-5.475A6.995 6.995 0 0 0 12 2zm0 10c-1.933 0-3.5-1.567-3.5-3.5S10.067 5 12 5s3.5 1.567 3.5 3.5S13.933 12 12 12z"/> </svg>
其中，viewBox 属性指定了 SVG 图像的可见区域，<path> 元素则定义了图形的轮廓。
使用 CSS 自定义样式
可以使用 CSS 样式表来自定义 Material Design 图标库的样式和主题。
-- -------------------- ---- ------- - - ---------- ----- ------ -------- ------------ --- --- ----- - ------------------------ - ---------- ---- -- -------- ------- - ---------- ---- - ---- - ---------- ------------- - -- - ---------- --------------- - -
其中，font-size、color 和 text-shadow 等属性用于控制字体的样式，.material-icons.spinning 则指定了一个自定义类别名，可以在 HTML 中通过添加类名来应用这个样式。CSS 中的 @keyframes 则定义了一个旋转动画，可以使用 animation 属性来应用。
总结
Material Design 图标库是一个非常实用的资源库，能够为 Web 和移动应用开发者提供丰富、一致和易于使用的图标资源。通过学习 Material Design 的视觉规范和使用方法，我们可以更好地管理和应用图标，并为用户提供优秀的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64585e46968c7c53b0ac08a9