使用google Material 图标

最新推荐文章于 2024-06-07 09:56:14 发布

云上飞47636962

最新推荐文章于 2024-06-07 09:56:14 发布

阅读量1.2k

点赞数 1

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

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

版权

WEB开发专栏收录该内容

12 篇文章 1 订阅

订阅专栏

浏览

谷歌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 -->