- 网页图标教程
- Web 图标-主页
- Web 图标 - 简介
- 字体真棒
- 字体真棒图标
- 真棒字体 - 网页图标
- 字体真棒-手形图标
- Font Awesome - 交通图标
- Font Awesome - 性别图标
- Font Awesome - 文件类型图标
- Font Awesome - 旋转图标
- Font Awesome - 表单控件图标
- 字体真棒-付款图标
- Font Awesome - 图表图标
- Font Awesome - 货币图标
- Font Awesome - 文本编辑器图标
- Font Awesome - 方向图标
- Font Awesome - 视频播放器图标
- Font Awesome - 品牌图标
- 字体真棒-医疗图标
- 材质图标
- 材质图标
- 材质-动作图标
- 材料-警报图标
- 材质-AV 图标
- 材料-通信图标
- 材质-内容图标
- 材质-设备图标
- 材质-编辑器图标
- 材质-文件图标
- 材质-硬件图标
- 材质-图像图标
- 材质-地图图标
- 材质-导航图标
- 材质-通知图标
- 材料-社会图标
- 材质 - 切换图标
- Bootstrap 字形
- Bootstrap 字形
- Bootstrap - 组件
- Web 图标有用的资源
- Web 图标 - 快速指南
- 网页图标 - 有用的资源
- Web 图标-讨论
材质-动作图标
本章介绍了 Google 的（Material）操作图标的用法。假设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 的（Material）Action Icons 的用法和结果。将上述程序的 <body> 标记替换为表中给出的代码以获得相应的输出 -
| 用法 | 结果 |
|---|---|
| <i class="material-icons custom">3d_rotation</i> | 3d_旋转 |
| <i class="material-icons custom">辅助功能</i> | 可达性 |
| <i class="material-icons custom">account_balance</i> | 账户余额 |
| <i class="material-icons custom">account_balance_wallet</i> | 账户余额钱包 |
| <i class="material-icons custom">account_box</i> | 帐户框 |
| <i class="material-icons custom">account_circle</i> | 帐户_圈子 |
| <i class="material-icons custom">add_shopping_cart</i> | 添加购物车 |
| <i class="material-icons custom">闹钟</i> | 警报 |
| <i class="material-icons custom">alarm_add</i> | 警报添加 |
| <i class="material-icons custom">alarm_off</i> | 闹钟关闭 |
| <i class="material-icons custom">alarm_on</i> | 警报开启 |
| <i class="material-icons custom">android</i> | 安卓 |
| <i class="material-icons custom">公告</i> | 公告 |
| <i class="material-icons custom">aspect_ratio</i> | 纵横比 |
| <i class="material-icons custom">评估</i> | 评估 |
| <i class="material-icons custom">作业</i> | 任务 |
| <i class="material-icons custom">assignment_ind</i> | 作业索引 |
| <i class="material-icons custom">分配_延迟</i> | 分配_迟到 |
| <i class="material-icons custom">assignment_return</i> | 分配_返回 |
| <i class="material-icons custom">分配_返回</i> | 分配_返回 |
| <i class="material-icons custom">assignment_turned_in</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">bookmark_border</i> | 书签边框 |
| <i class="material-icons custom">bug_report</i> | 错误报告 |
| <i class="material-icons custom">构建</i> | 建造 |
| <i class="material-icons custom">已缓存</i> | 缓存的 |
| <i class="material-icons custom">camera_enhance</i> | 相机增强 |
| <i class="material-icons custom">card_giftcard</i> | 卡_礼品卡 |
| <i class="material-icons custom">card_membership</i> | 会员卡 |
| <i class="material-icons custom">card_travel</i> | 旅行卡 |
| <i class="material-icons custom">change_history</i> | 变更历史记录 |
| <i class="material-icons custom">check_circle</i> | 检查圆 |
| <i class="material-icons custom">chrome_reader_mode</i> | chrome_reader_mode |
| <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">DNS</i> | 域名系统 |
| <i class="material-icons custom">完成</i> | 完毕 |
| <i class="material-icons custom">done_all</i> | 全部完成 |
| <i class="material-icons custom">弹出</i> | 喷射 |
| <i class="material-icons custom">活动</i> | 事件 |
| <i class="material-icons custom">event_seat</i> | 事件座位 |
| <i class="material-icons custom">exit_to_app</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">favorite_border</i> | 最喜欢的边框 |
| <i class="material-icons custom">反馈</i> | 反馈 |
| <i class="material-icons custom">find_in_page</i> | 在页面中查找 |
| <i class="material-icons custom">find_replace</i> | 查找替换 |
| <i class="material-icons custom">flight_land</i> | 飞行着陆 |
| <i class="material-icons custom">flight_takeoff</i> | 航班起飞 |
| <i class="material-icons custom">flip_to_back</i> | 向后翻转 |
| <i class="material-icons custom">flip_to_front</i> | 翻转到前面 |
| <i class="material-icons custom">get_app</i> | 获取应用程序 |
| <i class="material-icons custom">gif</i> | 动图 |
| <i class="material-icons custom">等级</i> | 年级 |
| <i class="material-icons custom">group_work</i> | 团队合作 |
| <i class="material-icons custom">帮助</i> | 帮助 |
| <i class="material-icons custom">help_outline</i> | 帮助大纲 |
| <i class="material-icons custom">highlight_off</i> | 突出显示关闭 |
| <i class="material-icons custom">历史</i> | 历史 |
| <i class="material-icons custom">主页</i> | 家 |
| <i class="material-icons custom">hourglass_empty</i> | 沙漏_空 |
| <i class="material-icons custom">hourglass_full</i> | 沙漏_满 |
| <i class="material-icons custom">http</i> | http |
| <i class="material-icons custom">https</i> | https |
| <i class="material-icons custom">信息</i> | 信息 |
| <i class="material-icons custom">info_outline</i> | 信息大纲 |
| <i class="material-icons custom">输入</i> | 输入 |
| <i class="material-icons custom">invert_colors</i> | 反转颜色 |
| <i class="material-icons custom">标签</i> | 标签 |
| <i class="material-icons custom">label_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">lock_open</i> | 锁_打开 |
| <i class="material-icons custom">lock_outline</i> | 锁轮廓 |
| <i class="material-icons custom">忠诚度</i> | 忠诚 |
| <i class="material-icons custom">markunread_mailbox</i> | 标记未读邮箱 |
| <i class="material-icons custom">note_add</i> | 注释_添加 |
| <i class="material-icons custom">offline_pin</i> | 离线_pin |
| <i class="material-icons custom">open_in_browser</i> | 在浏览器中打开 |
| <i class="material-icons custom">open_in_new</i> | 在新中打开 |
| <i class="material-icons custom">open_with</i> | 打开用 |
| <i class="material-icons custom">浏览量</i> | 页面预览 |
| <i class="material-icons custom">付款</i> | 支付 |
| <i class="material-icons custom">perm_camera_mic</i> | perm_camera_mic |
| <i class="material-icons custom">perm_contact_cale</i> | perm_contact_cale |
| <i class="material-icons custom">perm_data_settings</i> | 永久数据设置 |
| <i class="material-icons custom">perm_device_information</i> | 永久设备信息 |
| <i class="material-icons custom">perm_identity</i> | 永久身份 |
| <i class="material-icons custom">perm_media</i> | 烫发媒体 |
| <i class="material-icons custom">perm_phone_msg</i> | 永久电话消息 |
| <i class="material-icons custom">perm_scan_wifi</i> | perm_scan_wifi |
| <i class="material-icons custom">画中画</i> | 画中画 |
| <i class="material-icons custom">play_for_work</i> | 为工作而玩 |
| <i class="material-icons custom">聚合物</i> | 聚合物 |
| <i class="material-icons custom">power_settings_new</i> | 电源设置新 |
| <i class="material-icons custom">打印</i> | 打印 |
| <i class="material-icons custom">query_builder</i> | 查询生成器 |
| <i class="material-icons custom">question_answer</i> | 问题_答案 |
| <i class="material-icons custom">收据</i> | 收据 |
| <i class="material-icons custom">兑换</i> | 赎回 |
| <i class="material-icons custom">重新排序</i> | 重新排序 |
| <i class="material-icons custom">report_problem</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">settings_applications</i> | 设置_应用程序 |
| <i class="material-icons custom">settings_bluetooth</i> | 设置_蓝牙 |
| <i class="material-icons custom">settings_brightness</i> | 设置亮度 |
| <i class="material-icons custom">settings_cell</i> | 设置单元格 |
| <i class="material-icons custom">settings_ethernet</i> | 设置_以太网 |
| <i class="material-icons custom">settings_input_antenna</i> | 设置输入天线 |
| <i class="material-icons custom">settings_input_component</i> | 设置输入组件 |
| <i class="material-icons custom">settings_input_hdmi</i> | 设置_输入_hdmi |
| <i class="material-icons custom">settings_input_svideo</i> | 设置_输入_视频 |
| <i class="material-icons custom">settings_overscan</i> | 设置_过扫描 |
| <i class="material-icons custom">settings_phone</i> | 设置_电话 |
| <i class="material-icons custom">settings_power</i> | 设置_电源 |
| <i class="material-icons custom">settings_remote</i> | 设置_远程 |
| <i class="material-icons custom">settings_voice</i> | 设置_语音 |
| <i class="material-icons custom">商店</i> | 店铺 |
| <i class="material-icons custom">shop_two</i> | 商店二号 |
| <i class="material-icons custom">购物篮</i> | 购物篮 |
| <i class="material-icons custom">shopping_cart</i> | 购物车 |
| <i class="material-icons custom">speaker_notes</i> | 演讲者笔记 |
| <i class="material-icons custom">拼写检查</i> | 拼写检查 |
| <i class="material-icons custom">star_rate</i> | 星级 |
| <i class="material-icons custom">星星</i> | 星星 |
| <i class="material-icons custom">商店</i> | 店铺 |
| <i class="material-icons custom">主题</i> | 主题 |
| <i class="material-icons custom">supervisor_account</i> | 主管帐户 |
| <i class="material-icons custom">swap_horiz</i> | 交换水平 |
| <i class="material-icons custom">swap_vert</i> | 交换垂直 |
| <i class="material-icons custom">swap_vertical_circle</i> | 交换垂直圆 |
| <i class="material-icons custom">system_update_alt</i> | 系统更新替代 |
| <i class="material-icons custom">选项卡</i> | 标签 |
| <i class="material-icons custom">tab_unselected</i> | tab_unselected |
| <i class="material-icons custom">剧院</i> | 剧院 |
| <i class="material-icons custom">thumb_down</i> | 拇指向下 |
| <i class="material-icons custom">thumb_up</i> | 竖起大拇指 |
| <i class="material-icons custom">thumbs_up_down</i> | 竖起大拇指 |
| <i class="material-icons custom">目录</i> | 目录 |
| <i class="material-icons custom">今天</i> | 今天 |
| <i class="material-icons custom">收费</i> | 收费 |
| <i class="material-icons custom">track_changes</i> | 跟踪变化 |
| <i class="material-icons custom">翻译</i> | 翻译 |
| <i class="material-icons custom">trending_down</i> | 趋势下降 |
| <i class="material-icons custom">trending_flat</i> | 趋势扁平化 |
| <i class="material-icons custom">trending_up</i> | 趋势向上 |
| <i class="material-icons custom">turned_in</i> | 上交 |
| <i class="material-icons custom">verified_user</i> | 已验证用户 |
| <i class="material-icons custom">view_agenda</i> | 查看议程 |
| <i class="material-icons custom">view_array</i> | 视图数组 |
| <i class="material-icons custom">view_carousel</i> | 视图轮播 |
| <i class="material-icons custom">view_column</i> | 视图列 |
| <i class="material-icons custom">view_day</i> | 查看日 |
| <i class="material-icons custom">view_headline</i> | 视图标题 |
| <i class="material-icons custom">view_list</i> | 视图列表 |
| <i class="material-icons custom">view_module</i> | 视图模块 |
| <i class="material-icons custom">view_quilt</i> | 视图被子 |
| <i class="material-icons custom">view_stream</i> | 视图流 |
| <i class="material-icons custom">view_week</i> | 查看周 |
| <i class="material-icons custom">可见性</i> | 能见度 |
| <i class="material-icons custom">visibility_off</i> | 可见性关闭 |
| <i class="material-icons custom">工作</i> | 工作 |
| <i class="material-icons custom">youtube_searched_for</i> | youtube_searched_for |
| <i class="material-icons custom">zoom_in</i> | 放大 |
| <i class="material-icons custom">zoom_out</i> | 缩小 |