使用google Material 图标

浏览

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

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

使用google Material 图标_第1张图片

使用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_chartspan>          
<span class="material-icons-outlined">pie_chartspan> 
<span class="material-icons-round">pie_chartspan>    
<span class="material-icons-sharp">pie_chartspan>    
<span class="material-icons-two-tone">pie_chartspan> 

你可能感兴趣的:(WEB开发,javascript,前端,vue.js)