素材-アイコンの切り替え

この章では、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">check_box</i>	check_box
<i class="material-icons custom">check_box_outline_blank</i>	check_box_outline_blank
<i class="material-icons custom">indeterminate_check_box</i>	indeterminate_check_box
<i class="material-icons custom">radio_button_checked</i>	radio_button_checked
<i class="material-icons custom">radio_button_unchecked</i>	radio_button_unchecked
<i class="material-icons custom">star</i>	star
<i class="material-icons custom">star_border</i>	star_border
<i class="material-icons custom">star_half</i>	star_half

Web-icons-material-toggle-icons

素材-アイコンの切り替え