使用google Material 图标

最新推荐文章于 2025-04-09 09:17:43 发布

云上飞47636962

最新推荐文章于 2025-04-09 09:17:43 发布

阅读量1.5k

点赞数 1

分类专栏： WEB开发文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/u011575168/article/details/129045646

版权

WEB开发专栏收录该内容

13 篇文章

订阅专栏

文章介绍了如何浏览和使用谷歌的Material图表库，包括在线查看图标、通过npm安装、在项目中引入CSS文件，以及在HTML中使用不同风格的图标，如Filled、Outlined、Round、Sharp和TwoTone。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浏览

谷歌Material图表库网址：https://fonts.google.com/icons?hl=zh-cn

可直接在线浏览各个图标的样子以及字符串表示

在这里插入图片描述

使用npm安装

网址：https://github.com/marella/material-icons#readme
安装命令：

npm install material-icons@latest

CSS引用

在项目的主文件中引入css文件 (example: src/index.js in Create React App, src/main.js in Vue CLI):

import 'material-icons/iconfont/material-icons.css';

使用

在html中使用图标时，设置好class和对应的图标名称即可，见下面代码示例：

<span class="material-icons">pie_chart</span>          <!-- Filled -->
<span class="material-icons-outlined">pie_chart</span> <!-- Outlined -->
<span class="material-icons-round">pie_chart</span>    <!-- Round -->
<span class="material-icons-sharp">pie_chart</span>    <!-- Sharp -->
<span class="material-icons-two-tone">pie_chart</span> <!-- Two Tone -->