材质-硬件图标

本章介绍了 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">演员表</i> 投掷
<i class="material-icons custom">cast_connected</i> 演员连接
<i class="material-icons custom">计算机</i> 电脑
<i class="material-icons custom">desktop_mac</i> 桌面_mac
<i class="material-icons custom">desktop_windows</i> 桌面窗口
<i class="material-icons custom">developer_board</i> 开发者板
<i class="material-icons custom">device_hub</i> 设备集线器
<i class="material-icons custom">停靠</i> 码头
<i class="material-icons custom">游戏手柄</i> 游戏手柄
<i class="material-icons custom">耳机</i> 耳机
<i class="material-icons custom">headset_mic</i> 耳机麦克风
<i class="material-icons custom">键盘</i> 键盘
<i class="material-icons custom">keyboard_arrow_down</i> 键盘向下箭头
<i class="material-icons custom">keyboard_arrow_left</i> 键盘向左箭头
<i class="material-icons custom">keyboard_arrow_right</i> 键盘右箭头
<i class="material-icons custom">keyboard_arrow_up</i> 键盘向上箭头
<i class="material-icons custom">keyboard_backspace</i> 键盘退格键
<i class="material-icons custom">keyboard_capslock</i> 键盘大写锁定
<i class="material-icons custom">keyboard_hide</i> 键盘隐藏
<i class="material-icons custom">keyboard_return</i> 键盘返回
<i class="material-icons custom">keyboard_tab</i> 键盘选项卡
<i class="material-icons custom">keyboard_voice</i> 键盘声音
<i class="material-icons custom">笔记本电脑</i> 笔记本电脑
<i class="material-icons custom">laptop_chromebook</i> 笔记本电脑_chromebook
<i class="material-icons custom">laptop_mac</i> 笔记本电脑_mac
<i class="material-icons custom">laptop_windows</i> 笔记本电脑_windows
<i class="material-icons custom">内存</i> 记忆
<i class="material-icons custom">鼠标</i> 老鼠
<i class="material-icons custom">phone_android</i> 手机_android
<i class="material-icons custom">phone_iphone</i> 电话_iphone
<i class="material-icons custom">电话链接</i> 电话链接
<i class="material-icons custom">phonelink_off</i> 电话链接关闭
<i class="material-icons custom">power_input</i> 电源输入
<i class="material-icons custom">路由器</i> 路由器
<i class="material-icons custom">扫描仪</i> 扫描器
<i class="material-icons custom">安全性</i> 安全
<i class="material-icons custom">sim_card</i> SIM卡
<i class="material-icons custom">智能手机</i> 手机
<i class="material-icons custom">扬声器</i> 扬声器
<i class="material-icons custom">speaker_group</i> 发言者组
<i class="material-icons custom">平板电脑</i> 药片
<i class="material-icons custom">tablet_android</i> 平板电脑_android
<i class="material-icons custom">tablet_mac</i> 平板电脑_mac
<i class="material-icons custom">玩具</i> 玩具
<i class="material-icons custom">电视</i> 电视
<i class="material-icons custom">观看</i> 手表