材质-内容图标

本章介绍了 Google（材料）内容图标的用法。假设custom是我们定义大小和颜色的 CSS 类名称，如下面给出的示例所示。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

下表包含 Google 的（材料）内容图标的用法和结果。将上述程序的 <body> 标记替换为表中给出的代码以获得相应的输出 -

用法 结果
<i class="material-icons custom">添加</i> 添加
<i class="material-icons custom">add_box</i> 添加框
<i class="material-icons custom">add_circle</i> 添加圈子
<i class="material-icons custom">add_circle_outline</i> 添加圆轮廓
<i class="material-icons custom">存档</i> 档案
<i class="material-icons custom">退格键</i> 退格键
<i class="material-icons custom">块</i> 堵塞
<i class="material-icons custom">清晰</i> 清除
<i class="material-icons custom">content_copy</i> 内容复制
<i class="material-icons custom">content_cut</i> 内容剪切
<i class="material-icons custom">content_paste</i> 内容粘贴
<i class="material-icons custom">创建</i> 创造
<i class="material-icons custom">草稿</i> 草稿
<i class="material-icons custom">filter_list</i> 过滤器列表
<i class="material-icons custom">标志</i> 旗帜
<i class="material-icons custom">font_download</i> 字体下载
<i class="material-icons custom">转发</i> 向前
<i class="material-icons custom">手势</i> 手势
<i class="material-icons custom">收件箱</i> 收件箱
<i class="material-icons custom">链接</i> 关联
<i class="material-icons custom">邮件</i> 邮件
<i class="material-icons custom">标记为未读</i> 标记为未读
<i class="material-icons custom">重做</i> 重做
<i class="material-icons custom">删除</i> 消除
<i class="material-icons custom">remove_circle</i> 删除圆
<i class="material-icons custom">remove_circle_outline</i> 删除圆轮廓
<i class="material-icons custom">回复</i> 回复
<i class="material-icons custom">reply_all</i> 全部回复
<i class="material-icons custom">报告</i> 报告
<i class="material-icons custom">保存</i> 节省
<i class="material-icons custom">全选</i> 全选
<i class="material-icons custom">发送</i> 发送
<i class="material-icons custom">排序</i> 种类
<i class="material-icons custom">text_format</i> 文本格式
<i class="material-icons custom">stay_current_portrait</i> 保持当前肖像
<i class="material-icons custom">撤消</i> 撤消