Google Material Icons Googleアイコン(GMI マテリアルアイコン) 見本一覧 セルフホスト(self-host)

HTMLに直接spanのMaterial Icons(マテリアルアイコン)を記述する「span型」、かつセルフホスティング

グリーンは「filled (material-icons)」、これはデフォルトかつ塗りつぶし

ブルーは「outlined (material-icons-outlined)」

バイオレットは「sharp (material-icons-sharp)」

レッドは「round (material-icons-round)」
「two-tone (material-icons-two-tone)」はカラーなし

※::beforeや::afterを使いたい場合は、span型ではなくCSS content型を推奨

visibility(outlined)
visibility

expand_circle_down(outlined)
expand_circle_down

face_3(outlined)
face_3

keyboard_double_arrow_right(outlined)
keyboard_double_arrow_right

double_arrow(sharp)
double_arrow

home(round)
home

home(filled)
home

home(outlined)
home

home(round)
home

home(sharp)
home

home(two-tone)
home

done(filled)
done

check_box(outlined)
check_box

warning(filled)
warning

report_problem(outlined)
report_problem

assignment_late(filled)
assignment_late

assignment_late(outlined)
assignment_late

sms_failed(filled)
sms_failed

sms_failed(outlined)
sms_failed

mode_edit(filled)
mode_edit

category(outlined)
category

library_add(outlined)
library_add

local_offer(filled)
local_offer

local_offer(outlined)
local_offer

folder(filled)
folder

folder(outlined)
folder

widgets(filled)
widgets

widgets(outlined)
widgets

menu(filled)
menu

menu_open(outlined)
menu_open

menu_book(two-tone)
menu_book

lock(filled)
lock

mail(round)
mail

call(filled)
call

map(filled)
map

search(filled)
search

search(outlined)
search

details(outlined)
details

android(outlined)
android

adb(filled)
adb

bookmark(filled)
bookmark

bookmark_addbookmark_add

schedule(two-tone)
schedule

schedule(outlined)
schedule

label(outlined)
label

keyboard(sharp)
keyboard

check_circle(filled)
check_circle

check_circle(outlined)
check_circle

info(filled)
info

view_column(round)
view_column

view_column(outlined)
view_column

store(outlined)
store

credit_card(two-tone)
credit_card

credit_card(outlined)
credit_card

local_mall(filled)
local_mall

local_mall(outlined)
local_mall

local_grocery_store(filled)
local_grocery_store

local_grocery_store(outlined)
local_grocery_store

add_shopping_cart(filled)
add_shopping_cart

add_shopping_cart(outlined)
add_shopping_cart

shop(filled)
shop

local_shipping(filled)
local_shipping

local_shipping(outlined)
local_shipping

more_vert(round)
more_vert

more_horiz(filled)
more_horiz

link(round)
link

star(filled)
star

star_border(outlined)
star_border

web(two-tone)
web

web(outlined)
web

thumb_up(filled)
thumb_up

thumb_up(outlined)
thumb_up

thumb_down(filled)
thumb_down

thumb_down(outlined)
thumb_down

insert_emoticon(filled)
insert_emotico

insert_emoticon(outlined)
insert_emotico

sentiment_satisfied(two-tone)
sentiment_satisfied

sentiment_satisfied(outlined)
sentiment_satisfied

account_circle(round)
account_circle

account_circle(outlined)
account_circle

sentiment_very_dissatisfied(filled)
sentiment_very_dissatisfied

sentiment_very_dissatisfied(outlined)
sentiment_very_dissatisfied

person(filled)
person

person(outlined)
person

computer(filled)
computer

computer(two-tone)
computer

desktop_mac(filled)
desktop_mac

desktop_mac(two-tone)
desktop_mac

desktop_windows(filled)
desktop_windows

desktop_windows(two-tone)
desktop_windows

laptop_mac(round)
laptop_mac

laptop_mac(two-tone)
laptop_mac

tablet_mac(filled)
tablet_mac

tablet_android(two-tone)
tablet_android

tablet(filled)
tablet

phone_iphone(two-tone)
phone_iphone

phone_android(two-tone)
phone_android

smartphone(round)
smartphone

stay_current_portrait(filled)
stay_current_portrait

stay_current_landscape(filled)
stay_current_landscape

refresh(filled)
refresh

cloud_queue(outlined)
cloud_queue

cloud_queue(two-tone)
cloud_queue

looks_one(outlined)
looks_one

looks_two(outlined)
looks_two

looks_3(outlined)
looks_3

looks_4(round)
looks_4

looks_5(outlined)
looks_5

looks_6(two-tone)
looks_6

place(two-tone)
place

event(two-tone)
event

share(outlined)
share

restaurant(round)
restaurant

restaurant_menu(outlined)
restaurant_menu

cake(outlined)
cake

lunch_dining(outlined)
lunch_dining

local_cafe(outlined)
local_cafe

ramen_dining(two-tone)
ramen_dining

dinner_dining(outlined)
dinner_dining

set_meal(round)
set_meal

soup_kitchen(round)
soup_kitchen

bento(two-tone)
bento

dining(outlined)
dining

toggle_on(two-tone)
toggle_on

toggle_off(outlined)
toggle_off

2k(round)
2k

4k(outlined)
4k

settings_applications(two-tone)
settings_applications

image(outlined)
image

add_photo_alternate(outlined)
add_photo_alternate

integration_instructions(two-tone)
integration_instructions

grid_view(outlined)
grid_view

settings(two-tone)
settings

link(outlined)
link

account_tree(outlined)
account_tree

comment(outlined)
comment