マテリアル-エディターアイコン

この章では、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">attach_file</i>	attach_file
<i class="material-icons custom">attach_money</i>	attach_money
<i class="material-icons custom">border_all</i>	border_all
<i class="material-icons custom">border_bottom</i>	border_bottom
<i class="material-icons custom">border_clear</i>	border_clear
<i class="material-icons custom">border_color</i>	border_color
<i class="material-icons custom">border_horizontal</i>	border_horizontal
<i class="material-icons custom">border_inner</i>	border_inner
<i class="material-icons custom">border_left</i>	border_left
<i class="material-icons custom">border_outer</i>	border_outer
<i class="material-icons custom">border_right</i>	border_right
<i class="material-icons custom">border_style</i>	border_style
<i class="material-icons custom">border_top</i>	border_top
<i class="material-icons custom">border_vertical</i>	border_vertical
<i class="material-icons custom">format_align_center</i>	format_align_center
<i class="material-icons custom">format_align_justify</i>	format_align_justify
<i class="material-icons custom">format_align_left</i>	format_align_left
<i class="material-icons custom">format_align_right</i>	format_align_right
<i class="material-icons custom">format_bold</i>	format_bold
<i class="material-icons custom">format_clear</i>	format_clear
<i class="material-icons custom">format_color_fill</i>	format_color_fill
<i class="material-icons custom">format_color_reset</i>	format_color_reset
<i class="material-icons custom">format_color_text</i>	format_color_text
<i class="material-icons custom">format_indent_decrease</i>	format_indent_decrease
<i class="material-icons custom">format_indent_increase</i>	format_indent_increase
<i class="material-icons custom">format_italic</i>	format_italic
<i class="material-icons custom">format_line_spacing</i>	format_line_spacing
<i class="material-icons custom">format_list_bulleted</i>	format_list_bulleted
<i class="material-icons custom">format_list_numbered</i>	format_list_numbered
<i class="material-icons custom">format_paint</i>	format_paint
<i class="material-icons custom">format_quote</i>	format_quote
<i class="material-icons custom">format_size</i>	format_size
<i class="material-icons custom">format_strikethrough</i>	format_strikethrough
<i class="material-icons custom">format_textdirection_l_to_r</i>	format_textdirection_l_to_r
<i class="material-icons custom">format_textdirection_r_to_l</i>	format_textdirection_r_to_l
<i class="material-icons custom">format_underline</i>	format_underline
<i class="material-icons custom">functions</i>	functions
<i class="material-icons custom">insert_chart</i>	insert_chart
<i class="material-icons custom">insert_comment</i>	insert_comment
<i class="material-icons custom">insert_drive_file</i>	insert_drive_file
<i class="material-icons custom">insert_emoticon</i>	insert_emoticon
<i class="material-icons custom">insert_invitation</i>	insert_invitation
<i class="material-icons custom">insert_link</i>	insert_link
<i class="material-icons custom">insert_photo</i>	insert_photo
<i class="material-icons custom">merge_type</i>	merge_type
<i class="material-icons custom">mode_comment</i>	mode_comment
<i class="material-icons custom">mode_edit</i>	mode_edit
<i class="material-icons custom">money_off</i>	money_off
<i class="material-icons custom">publish</i>	publish
<i class="material-icons custom">space_bar</i>	space_bar
<i class="material-icons custom">strikethrough_s</i>	strikethrough_s
<i class="material-icons custom">vertical_align_bottom</i>	vertical_align_bottom
<i class="material-icons custom">vertical_align_center</i>	vertical_align_center
<i class="material-icons custom">vertical_align_top</i>	vertical_align_top
<i class="material-icons custom">wrap_text</i>	wrap_text

Web-icons-material-editor-icons

マテリアル-エディターアイコン