>> テーマ変更に伴い見づらい箇所や不具合があるかもしれません、ご迷惑をおかけします。→
PR

Googleマテリアルアイコン:よく使うアイコンコード50種

Other
この記事は約11分で読めます。

GoogleのMaterial iconsは、無料で利用できるマテリアルデザインのアイコンが多数あり、SVGやPNGで保存できる他、アイコンフォントとしても利用できます。

Webサイトで簡単に利用する方法については以下をご覧ください。

Googleマテリアルアイコンの使い方とよく使うアイコンコード
GoogleのMaterial iconsは、無料で利用できるマテリアルデザインのアイコンが多数あり、SVGやPNGで保存できる他、アイコンフォントとしても利用できます。 Webサイトで簡単に利用する方法についてです。 無料アイコンフォント...

 

Material icons

Material icons」はGoogleフォントになる為、表示速度が速い事が特徴です。(Google推奨なのも利点)

無料アイコンの数は、現在1,800種類以上。
Material Icons

デザインパターン

Material icons

Outline・Field

home

<span class=”material-icons-outlined”>アイコン名</span>

Sharp
Material icons:Sharp

<span class=”material-icons-sharp”>アイコン名</span>

Two tone

Material icons: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>

home
home
home

 

色指定

サイズ変更の際と同様に、スタイルを記述すれば可能です。

<span class=”material-icons” style=”font-size: 24px; color: pink;”>home</span>

home

 

よく使いそうなアイコンとコード

アイコン コード HTML
home e88a <span class=”material-icons-outlined”>home</span>
search e8b6 <span class=”material-icons-outlined”>search</span>
help_outline e8fd <span class=”material-icons-outlined”>help_outline</span>
add_circle_outline e148 <span class=”material-icons-outlined”>add_circle_outline</span>
error_outline e001 <span class=”material-icons-outlined”>error_outline</span>
favorite_border e87e <span class=”material-icons-outlined”>favorite_border</span>
favorite e87d <span class=”material-icons-outlined”>favorite</span>
music_note e405 <span class=”material-icons-outlined”>music_note</span>
local_offer e54e <span class=”material-icons-outlined”>local_offer</span> 
loyalty e89a <span class=”material-icons-outlined”>loyalty</span> 
email e0be <span class=”material-icons-outlined”>email</span>
call e0b0 <span class=”material-icons-outlined”>call</span>
phone_in_talk e61d  <span class=”material-icons-outlined”>phone_in_talk</span> 
phonelink_ring e0dd <span class=”material-icons-outlined”>phonelink_ring</span>
phone_iphone e325 <span class=”material-icons-outlined”>phone_iphone</span>
laptop e31e <span class=”material-icons-outlined”>laptop</span>
keyboard e312 <span class=”material-icons-outlined”>keyboard</span>
headset_mic e311 <span class=”material-icons-outlined”>headset_mic</span>
mouse e323 <span class=”material-icons-outlined”>mouse</span>?
photo_camera e412 <span class=”material-icons-outlined”>photo_camera</span>?
image e3f4 <span class=”material-icons-outlined”>image</span>?
palette e40a <span class=”material-icons-outlined”>palette</span>?
lock e897 <span class=”material-icons-outlined”>lock</span>
link e157 <span class=”material-icons-outlined”>link</span>
facebook f234 <span class=”material-icons-outlined”>facebook</span>
thumb_up_off_alt e9f3 <span class=”material-icons-outlined”>thumb_up_off_alt</span>
thumb_down_off_alt e9f2 <span class=”material-icons-outlined”>thumb_down_off_alt</span>
mode_comment e253 <span class=”material-icons-outlined”>mode_comment</span>
comment_bank ea4e <span class=”material-icons-outlined”>comment_bank</span>
priority_high e645  <span class=”material-icons-outlined”>priority_high</span> 
play_circle e1c4 <span class=”material-icons-outlined”>play_circle</span>
fmd_good f00f <span class=”material-icons-outlined”>fmd_good</span>
fmd_bad f00e <span class=”material-icons-outlined”>fmd_bad</span>
star_outline f06f <span class=”material-icons-outlined”>star_outline</span>
star e838 <span class=”material-icons-outlined”>star</span>
settings e8b8 <span class=”material-icons-outlined”>settings</span>
lock e897 <span class=”material-icons-outlined”>lock</span>
done e876 <span class=”material-icons-outlined”>done</span>
check_circle_outline e92d <span class=”material-icons-outlined”>check_circle_outline</span>
check_box e834  <span class=”material-icons-outlined”>check_box</span> 
content_paste e14f <span class=”material-icons-outlined”>content_paste</span>
description e873 <span class=”material-icons-outlined”>description</span>
mode_edit_outline f035 <span class=”material-icons-outlined”>mode_edit_outline</span>
tips_and_updates e79a <span class=”material-icons-outlined”>tips_and_updates</span>
language e894 <span class=”material-icons-outlined”>language</span>
build e869 <span class=”material-icons-outlined”>build</span>
arrow_forward e5c8  <span class=”material-icons-outlined”>arrow_forward</span> 
arrow_back e5c4  <span class=”material-icons-outlined”>arrow_back</span> 
chevron_right e5cc  <span class=”material-icons-outlined”>chevron_right</span> 
chevron_left e5cb  <span class=”material-icons-outlined”>chevron_left</span> 
double_arrow ea50  <span class=”material-icons-outlined”>double_arrow</span> 
file_download e2c4 <span class=”material-icons-outlined”>file_download</span>
file_upload e2c6 <span class=”material-icons-outlined”>file_upload</span>?
cloud_download e2c0 <span class=”material-icons-outlined”>cloud_download</span>
cloud_upload e2c3 <span class=”material-icons-outlined”>cloud_upload</span>
shopping_cart e8cc <span class=”material-icons-outlined”>shopping_cart</span>
add_shopping_cart e854 <span class=”material-icons-outlined”>add_shopping_cart</span>

 

 

コメント

タイトルとURLをコピーしました