GoogleのMaterial iconsは、無料で利用できるマテリアルデザインのアイコンが多数あり、SVGやPNGで保存できる他、アイコンフォントとしても利用できます。
Webサイトで簡単に利用する方法については以下をご覧ください。
Googleマテリアルアイコンの使い方とよく使うアイコンコード
GoogleのMaterial iconsは、無料で利用できるマテリアルデザインのアイコンが多数あり、SVGやPNGで保存できる他、アイコンフォントとしても利用できます。 Webサイトで簡単に利用する方法についてです。 無料アイコンフォント...
Material icons
「Material icons」はGoogleフォントになる為、表示速度が速い事が特徴です。（Google推奨なのも利点）
無料アイコンの数は、現在1,800種類以上。
Material Icons
デザインパターン
Outline・Field
<span class=”material-icons-outlined”>アイコン名</span>
<span class=”material-icons-sharp”>アイコン名</span>
Two tone
<span class=”material-icons-two-tone”>アイコン名</span>
サイズ指定
<span class=”material-icons” style=”font-size: 18px;”>home</span>
＜以下のように記述したサンプル＞
<span class=”material-icons”>home</span>
<span class=”material-icons” style=”font-size: 18px;”>home</span>
<span class=”material-icons” style=”font-size: 22px;”>home</span>
<span class=”material-icons” style=”font-size: 18px;”>home</span>
<span class=”material-icons” style=”font-size: 22px;”>home</span>
色指定
サイズ変更の際と同様に、スタイルを記述すれば可能です。
<span class=”material-icons” style=”font-size: 24px; color: pink;”>home</span>
よく使いそうなアイコンとコード
| アイコン | コード | HTML |
|---|---|---|
| e88a | <span class=”material-icons-outlined”>home</span> | |
| e8b6 | <span class=”material-icons-outlined”>search</span> | |
| e8fd | <span class=”material-icons-outlined”>help_outline</span> | |
| e148 | <span class=”material-icons-outlined”>add_circle_outline</span> | |
| e001 | <span class=”material-icons-outlined”>error_outline</span> | |
| e87e | <span class=”material-icons-outlined”>favorite_border</span> | |
| e87d | <span class=”material-icons-outlined”>favorite</span> | |
| e405 | <span class=”material-icons-outlined”>music_note</span> | |
| e54e | <span class=”material-icons-outlined”>local_offer</span> | |
| e89a | <span class=”material-icons-outlined”>loyalty</span> | |
| e0be | <span class=”material-icons-outlined”>email</span> | |
| e0b0 | <span class=”material-icons-outlined”>call</span> | |
| e61d | <span class=”material-icons-outlined”>phone_in_talk</span> | |
| e0dd | <span class=”material-icons-outlined”>phonelink_ring</span> | |
| e325 | <span class=”material-icons-outlined”>phone_iphone</span> | |
| e31e | <span class=”material-icons-outlined”>laptop</span> | |
| e312 | <span class=”material-icons-outlined”>keyboard</span> | |
| e311 | <span class=”material-icons-outlined”>headset_mic</span> | |
| e323 | <span class=”material-icons-outlined”>mouse</span>? | |
| e412 | <span class=”material-icons-outlined”>photo_camera</span>? | |
| e3f4 | <span class=”material-icons-outlined”>image</span>? | |
| e40a | <span class=”material-icons-outlined”>palette</span>? | |
| e897 | <span class=”material-icons-outlined”>lock</span> | |
| e157 | <span class=”material-icons-outlined”>link</span> | |
| f234 | <span class=”material-icons-outlined”>facebook</span> | |
| e9f3 | <span class=”material-icons-outlined”>thumb_up_off_alt</span> | |
| e9f2 | <span class=”material-icons-outlined”>thumb_down_off_alt</span> | |
| e253 | <span class=”material-icons-outlined”>mode_comment</span> | |
| ea4e | <span class=”material-icons-outlined”>comment_bank</span> | |
| e645 | <span class=”material-icons-outlined”>priority_high</span> | |
| e1c4 | <span class=”material-icons-outlined”>play_circle</span> | |
| f00f | <span class=”material-icons-outlined”>fmd_good</span> | |
| f00e | <span class=”material-icons-outlined”>fmd_bad</span> | |
| f06f | <span class=”material-icons-outlined”>star_outline</span> | |
| e838 | <span class=”material-icons-outlined”>star</span> | |
| e8b8 | <span class=”material-icons-outlined”>settings</span> | |
| e897 | <span class=”material-icons-outlined”>lock</span> | |
| e876 | <span class=”material-icons-outlined”>done</span> | |
| e92d | <span class=”material-icons-outlined”>check_circle_outline</span> | |
| e834 | <span class=”material-icons-outlined”>check_box</span> | |
| e14f | <span class=”material-icons-outlined”>content_paste</span> | |
| e873 | <span class=”material-icons-outlined”>description</span> | |
| f035 | <span class=”material-icons-outlined”>mode_edit_outline</span> | |
| e79a | <span class=”material-icons-outlined”>tips_and_updates</span> | |
| e894 | <span class=”material-icons-outlined”>language</span> | |
| e869 | <span class=”material-icons-outlined”>build</span> | |
| e5c8 | <span class=”material-icons-outlined”>arrow_forward</span> | |
| e5c4 | <span class=”material-icons-outlined”>arrow_back</span> | |
| e5cc | <span class=”material-icons-outlined”>chevron_right</span> | |
| e5cb | <span class=”material-icons-outlined”>chevron_left</span> | |
| ea50 | <span class=”material-icons-outlined”>double_arrow</span> | |
| e2c4 | <span class=”material-icons-outlined”>file_download</span> | |
| e2c6 | <span class=”material-icons-outlined”>file_upload</span>? | |
| e2c0 | <span class=”material-icons-outlined”>cloud_download</span> | |
| e2c3 | <span class=”material-icons-outlined”>cloud_upload</span> | |
| e8cc | <span class=”material-icons-outlined”>shopping_cart</span> | |
| e854 | <span class=”material-icons-outlined”>add_shopping_cart</span> |