材质-图像图标

本章介绍了 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）图像图标的用法和结果。将上述程序的 <body> 标记替换为表中给出的代码以获得相应的输出 -

用法 结果
<i class="material-icons custom">add_to_photos</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">blur_circular</i> 模糊圆形
<i class =“material-icons custom”>模糊_线性</ i> 模糊线性
<i class="material-icons custom">blur_off</i> 模糊关闭
<i class="material-icons custom">blur_on</i> 模糊开启
<i class="material-icons custom">亮度_1</i> 亮度_1
<i class="material-icons custom">亮度_2</i> 亮度_2
<i class="material-icons custom">brightness_3</i> 亮度_3
<i class="material-icons custom">brightness_4</i> 亮度_4
<i class="material-icons custom">brightness_5</i> 亮度_5
<i class="material-icons custom">brightness_6</i> 亮度_6
<i class="material-icons custom">brightness_7</i> 亮度_7
<i class="material-icons custom">broken_image</i> 破碎的图像
<i class="material-icons custom">画笔</i> 刷子
<i class="material-icons custom">相机</i> 相机
<i class="material-icons custom">camera_alt</i> 相机替代
<i class="material-icons custom">camera_front</i> 前置摄像头
<i class="material-icons custom">camera_rear</i> 后置摄像头
<i class="material-icons custom">camera_roll</i> 相机胶卷
<i class="material-icons custom">center_focus_strong</i> 中心焦点强
<i class="material-icons custom">center_focus_weak</i> 中心焦点弱
<i class="material-icons custom">集合</i> 收藏品
<i class="material-icons custom">collections_bookmark</i> 收藏书签
<i class="material-icons custom">color_lens</i> 颜色_镜头
<i class="material-icons custom">着色</i> 着色
<i class="material-icons custom">比较</i> 比较
<i class="material-icons custom">control_point</i> 控制点
<i class="material-icons custom">control_point_duplicate</i> 控制点重复
<i class="material-icons custom">裁剪</i> 庄稼
<i class="material-icons custom">crop_16_9</i> 作物_16_9
<i class="material-icons custom">crop_3_2</i> 作物_3_2
<i class="material-icons custom">crop_5_4</i> 作物_5_4
<i class="material-icons custom">crop_7_5</i> 作物_7_5
<i class="material-icons custom">crop_din</i> 作物_丁
<i class="material-icons custom">crop_free</i> 自由裁切
<i class="material-icons custom">crop_landscape</i> 作物景观
<i class="material-icons custom">crop_original</i> 作物原始
<i class="material-icons custom">crop_portrait</i> 作物肖像
<i class="material-icons custom">crop_square</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">exposure_neg_1</i> 曝光_neg_1
<i class="material-icons custom">exposure_plus_1</i> 曝光加1
<i class="material-icons custom">exposure_plus_2</i> 曝光加2
<i class="material-icons custom">exposure_zero</i> 零曝光
<i class="material-icons custom">过滤器</i> 筛选
<i class="material-icons custom">filter_1</i> 过滤器_1
<i class="material-icons custom">filter_2</i> 过滤器_2
<i class="material-icons custom">filter_3</i> 过滤器_3
<i class="material-icons custom">filter_4</i> 过滤器_4
<i class="material-icons custom">filter_5</i> 过滤器_5
<i class="material-icons custom">filter_6</i> 过滤器_6
<i class="material-icons custom">filter_7</i> 过滤器_7
<i class="material-icons custom">filter_8</i> 过滤器_8
<i class="material-icons custom">filter_9</i> 过滤器_9
<i class="material-icons custom">filter_9_plus</i> 过滤器_9_plus
<i class="material-icons custom">filter_b_and_w</i> 过滤器b和w
<i class="material-icons custom">filter_center_focus</i> 过滤器中心焦点
<i class="material-icons custom">filter_drama</i> 过滤戏剧
<i class="material-icons custom">filter_frames</i> 过滤帧
<i class="material-icons custom">filter_hdr</i> 过滤器_hdr
<i class="material-icons custom">filter_none</i> 过滤器_无
<i class="material-icons custom">filter_tilt_shift</i> 滤镜倾斜移位
<i class="material-icons custom">filter_vintage</i> 过滤器_复古
<i class="material-icons custom">耀斑</i> 耀斑
<i class="material-icons custom">flash_auto</i> 自动闪光
<i class="material-icons custom">flash_off</i> 闪断
<i class="material-icons custom">flash_on</i> 闪光灯开启
<i class="material-icons custom">翻转</i> 翻动
<i class="material-icons custom">渐变</i> 坡度
<i class="material-icons custom">颗粒</i> 粮食
<i class="material-icons custom">grid_off</i> 网格关闭
<i class="material-icons custom">grid_on</i> 网格上
<i class="material-icons custom">hdr_off</i> HDR_关闭
<i class="material-icons custom">hdr_on</i> 人类发展报告
<i class="material-icons custom">hdr_strong</i> 人类发展报告强
<i class="material-icons custom">hdr_weak</i> hdr_弱
<i class="material-icons custom">治愈</i> 康复
<i class="material-icons custom">图像</i> 图像
<i class="material-icons custom">image_aspect_ratio</i> 图像纵横比
<i class="material-icons custom">iso</i> 异
<i class="material-icons custom">风景</i> 景观
<i class="material-icons custom">leak_add</i> 泄漏_添加
<i class="material-icons custom">leak_remove</i> 泄漏删除
<i class="material-icons custom">镜头</i> 镜片
<i class="material-icons custom">外观</i> 看起来
<i class="material-icons custom">looks_3</i> 看起来_3
<i class="material-icons custom">looks_4</i> 看起来_4
<i class="material-icons custom">looks_5</i> 看起来_5
<i class="material-icons custom">looks_6</i> 看起来_6
<i class="material-icons custom">looks_one</i> 看起来一个
<i class="material-icons custom">looks_two</i> 看起来两个
<i class="material-icons custom">放大镜</i> 放大镜
<i class="material-icons custom">单色照片</i> 单色照片
<i class="material-icons custom">movie_creation</i> 电影创作
<i class="material-icons custom">music_note</i> 音乐笔记
<i class="material-icons custom">自然</i> 自然
<i class="material-icons custom">nature_people</i> 自然人
<i class="material-icons custom">wb_sunny</i> wb_sunny
<i class="material-icons custom">navigate_next</i> 导航_下一个
<i class="material-icons custom">navigate_before</i> 之前导航
<i class="material-icons custom">调色板</i> 调色板
<i class="material-icons custom">全景</i> 全景
<i class="material-icons custom">panorama_fish_eye</i> 全景鱼眼
<i class="material-icons custom">panorama_horizo​​ntal</i> 水平全景
<i class="material-icons custom">panorama_vertical</i> 全景_垂直
<i class="material-icons custom">panorama_wide_angle</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">photo_size_select_actual</i> 照片_尺寸_选择_实际
<i class="material-icons custom">photo_size_select_large</i> 照片_尺寸_选择_大
<i class="material-icons custom">photo_size_select_small</i> 照片尺寸选择小
<i class="material-icons custom">picture_as_pdf</i> 图片为pdf
<i class="material-icons custom">肖像</i> 肖像
<i class="material-icons custom">remove_red_eye</i> 去除红眼
<i class="material-icons custom">rotate_90_ Degrees_ccw</i> 逆时针旋转 90 度
<i class="material-icons custom">rotate_left</i> 向左旋转
<i class="material-icons custom">rotate_right</i> 右旋
<i class="material-icons custom">幻灯片</i> 幻灯片
<i class="material-icons custom">拉直</i> 拉直
<i class="material-icons custom">样式</i> 风格
<i class="material-icons custom">switch_camera</i> 切换相机
<i class="material-icons custom">switch_video</i> 切换视频
<i class="material-icons custom">tag_faces</i> 标签面
<i class="material-icons custom">纹理</i> 质地
<i class="material-icons custom">延时拍摄</i> 游戏中时光倒流
<i class="material-icons custom">计时器</i> 计时器
<i class="material-icons custom">timer_10</i> 定时器_10
<i class="material-icons custom">timer_3</i> 定时器_3
<i class="material-icons custom">timer_off</i> 定时器关闭
<i class="material-icons custom">色调</i> 调性
<i class="material-icons custom">变换</i> 转换
<i class="material-icons custom">调整</i> 调
<i class="material-icons custom">view_comfy</i> 查看舒适
<i class="material-icons custom">view_compact</i> 紧凑视图
<i class="material-icons custom">小插图</i> 小插图
<i class="material-icons custom">wb_auto</i> WB_自动
<i class="material-icons custom">wb_cloudy</i> WB_多云
<i class="material-icons custom">wb_incandescent</i> wb_白炽灯
<i class="material-icons custom">wb_iridescent</i> wb_虹彩