材料-ハードウェアアイコン

この章では、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>タグを表に示されているコードに置き換えて、それぞれの出力を取得します-

使用法	結果
<iclass = "material-iconscustom">キャスト</ i>	キャスト
<i class = "material-icons custom"> cast_connected </ i>	cast_connected
<iclass = "material-iconscustom">コンピューター</ i>	コンピューター
<i class = "material-icons custom"> desktop_mac </ i>	Desktop_mac
<i class = "material-iconscustom">デスクトップ_ウィンドウ</ i>	デスクトップウィンドウ
<i class = "material-icons custom"> developer_board </ i>	development_board
<i class = "material-icons custom"> device_hub </ i>	device_hub
<iclass = "material-iconscustom">ドック</ i>	ドック
<iclass = "material-iconscustom">ゲームパッド</ i>	ゲームパッド
<iclass = "material-iconscustom">ヘッドセット</ i>	ヘッドセット
<i class = "material-icons custom"> headset_mic </ i>	ヘッドセットマイク
<iclass = "material-iconscustom">キーボード</ i>	キーボード
<i class = "material-iconscustom">キーボード_矢印_ダウン</ i>	Keyboard_arrow_down
<i class = "material-iconscustom">キーボード_矢印_左</ i>	Keyboard_arrow_left
<i class = "material-iconscustom">キーボード_矢印_右</ i>	Keyboard_arrow_right
<i class = "material-iconscustom">キーボード_矢印_up </ i>	Keyboard_arrow_up
<i class = "material-icons custom"> keyboard_backspace </ i>	Keyboard_backspace
<i class = "material-iconscustom">キーボード_capslock </ i>	Keyboard_capslock
<i class = "material-icons custom"> keyboard_hide </ i>	Keyboard_hide
<i class = "material-iconscustom">キーボード_リターン</ i>	Keyboard_return
<i class = "material-iconscustom">キーボード_タブ</ i>	Keyboard_tab
<i class = "material-iconscustom">キーボード_ボイス</ i>	キーボードボイス
<iclass = "material-iconscustom">ラップトップ</ i>	ラップトップ
<i class = "material-icons custom">ラップトップ_クロームブック</ i>	Laptop_chromebook
<i class = "material-icons custom">ラップトップ_マック</ i>	Laptop_mac
<i class = "material-icons custom">ラップトップウィンドウ</ i>	Laptop_windows
<iclass = "material-iconscustom">メモリ</ i>	記憶
<iclass = "material-iconscustom">マウス</ i>	マウス
<i class = "material-icons custom"> phone_android </ i>	phone_android
<i class = "material-icons custom"> phone_iphone </ i>	phone_iphone
<iclass = "material-iconscustom">電話リンク</ i>	phonelink
<i class = "material-icons custom"> phonelink_off </ i>	phonelink_off
<i class = "material-icons custom"> power_input </ i>	電源入力
<iclass = "material-iconscustom">ルーター</ i>	ルーター
<iclass = "material-iconscustom">スキャナー</ i>	スキャナー
<iclass = "material-iconscustom">セキュリティ</ i>	セキュリティ
<i class = "material-icons custom"> sim_card </ i>	SIMカード
<iclass = "material-iconscustom">スマートフォン</ i>	スマートフォン
<iclass = "material-iconscustom">スピーカー</ i>	スピーカー
<i class = "material-icons custom"> Speaker_group </ i>	Speaker_group
<iclass = "material-iconscustom">タブレット</ i>	タブレット
<i class = "material-icons custom"> Tablet_android </ i>	Tablet_android
<i class = "material-icons custom"> Tablet_mac </ i>	Tablet_mac
<iclass = "material-iconscustom">おもちゃ</ i>	おもちゃ
<i class = "material-iconscustom">テレビ</ i>	テレビ
<iclass = "material-iconscustom">見る</ i>	見る