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

この章では、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> 見る