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

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

Usage	Result
<i class="material-icons custom">cast</i>	cast
<i class="material-icons custom">cast_connected</i>	cast_connected
<i class="material-icons custom">computer</i>	computer
<i class="material-icons custom">desktop_mac</i>	desktop_mac
<i class="material-icons custom">desktop_windows</i>	desktop_windows
<i class="material-icons custom">developer_board</i>	developer_board
<i class="material-icons custom">device_hub</i>	device_hub
<i class="material-icons custom">dock</i>	dock
<i class="material-icons custom">gamepad</i>	gamepad
<i class="material-icons custom">headset</i>	headset
<i class="material-icons custom">headset_mic</i>	headset_mic
<i class="material-icons custom">keyboard</i>	keyboard
<i class="material-icons custom">keyboard_arrow_down</i>	keyboard_arrow_down
<i class="material-icons custom">keyboard_arrow_left</i>	keyboard_arrow_left
<i class="material-icons custom">keyboard_arrow_right</i>	keyboard_arrow_right
<i class="material-icons custom">keyboard_arrow_up</i>	keyboard_arrow_up
<i class="material-icons custom">keyboard_backspace</i>	keyboard_backspace
<i class="material-icons custom">keyboard_capslock</i>	keyboard_capslock
<i class="material-icons custom">keyboard_hide</i>	keyboard_hide
<i class="material-icons custom">keyboard_return</i>	keyboard_return
<i class="material-icons custom">keyboard_tab</i>	keyboard_tab
<i class="material-icons custom">keyboard_voice</i>	keyboard_voice
<i class="material-icons custom">laptop</i>	laptop
<i class="material-icons custom">laptop_chromebook</i>	laptop_chromebook
<i class="material-icons custom">laptop_mac</i>	laptop_mac
<i class="material-icons custom">laptop_windows</i>	laptop_windows
<i class="material-icons custom">memory</i>	memory
<i class="material-icons custom">mouse</i>	mouse
<i class="material-icons custom">phone_android</i>	phone_android
<i class="material-icons custom">phone_iphone</i>	phone_iphone
<i class="material-icons custom">phonelink</i>	phonelink
<i class="material-icons custom">phonelink_off</i>	phonelink_off
<i class="material-icons custom">power_input</i>	power_input
<i class="material-icons custom">router</i>	router
<i class="material-icons custom">scanner</i>	scanner
<i class="material-icons custom">security</i>	security
<i class="material-icons custom">sim_card</i>	sim_card
<i class="material-icons custom">smartphone</i>	smartphone
<i class="material-icons custom">speaker</i>	speaker
<i class="material-icons custom">speaker_group</i>	speaker_group
<i class="material-icons custom">tablet</i>	tablet
<i class="material-icons custom">tablet_android</i>	tablet_android
<i class="material-icons custom">tablet_mac</i>	tablet_mac
<i class="material-icons custom">toys</i>	toys
<i class="material-icons custom">tv</i>	tv
<i class="material-icons custom">watch</i>	watch

Web-icons-material-hardware-icons

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