Google Material Symbols(GMS) static self-host

HTMLに直接spanのMaterial Symbolsを記述する「span型」かつ静的アイコン(static)のセルフホスト

グリーンは「outlined (material-symbols-outlined)」
ブルーは「sharp (material-symbols-sharp)」
レッドは「rounded (material-symbols-rounded)」
マゼンタは「fill(塗りつぶし spanのclassにfill追記)」

※::beforeや::afterを使いたい場合は、span型ではなくCSS content型を推奨
Google Material Symbols(GMS)は重い・遅い、セルフホストでも辛い

visibility(rounded)
visibility

expand_circle_down(outlined)
expand_circle_down

face_3(outlined)
face_3

keyboard_double_arrow_right(rounded)
keyboard_double_arrow_right

double_arrow(sharp)
double_arrow

homehome

home(outlined fill)
home

house(outlined)
house

play_shapes(outlined)
play_shapes

home(sharp)
home

chair(outlined)
chair

done(outlined)
done

check_box(outlined)
check_box

warning(outlined fill)
warning

report_problem(outlined)
report_problem

assignment_late(outlined fill)
assignment_late

assignment_late(outlined)
assignment_late

sms_failed(outlined)
sms_failed

sms_failed(outlined)
sms_failed

mode_edit(outlined)
mode_edit

category(outlined)
category

library_add(outlined)
library_add

local_offer(outlined fill)
local_offer

local_offer(outlined)
local_offer

folder(outlined fill)
folder

folder(outlined)
folder

widgets(outlined fill)
widgets

widgets(outlined)
widgets

menu(outlined)
menu

menu_open(outlined)
menu_open

menu_book(rounded)
menu_book

lock(outlined fill)
lock

mail(outlined)
mail

call(outlined)
call

map(outlined)
map

search(outlined fill)
search

search(outlined)
search

details(outlined)
details

android(outlined)
android

adb(outlined)
adb

bookmark(outlined)
bookmark

bookmark_add(sharp)
bookmark_add

schedule(outlined fill)
schedule

schedule(outlined)
schedule

label(outlined)
label

keyboard(sharp)
keyboard

check_circle(outlined fill)
check_circle

check_circle(outlined)
check_circle

info(outlined)
info

view_column(outlined fill)
view_column

view_column(outlined)
view_column

store(outlined)
store

credit_card(outlined fill)
credit_card

credit_card(outlined)
credit_card

local_mall(outlined fill)
local_mall

local_mall(outlined)
local_mall

local_grocery_store(outlined fill)
local_grocery_store

local_grocery_store(outlined)
local_grocery_store

add_shopping_cart(outlined fill)
add_shopping_cart

add_shopping_cart(outlined)
add_shopping_cart

shop(outlined)
shop

local_shipping(outlined fill)
local_shipping

local_shipping(outlined)
local_shipping

more_vert(outlined)
more_vert

more_horiz(outlined fill)
more_horiz

link(outlined)
link

star(outlined)
star

star_border(outlined)
star_border

web(rounded)
web

web(outlined)
web

thumb_up(outlined fill)
thumb_up

thumb_up(outlined)
thumb_up

thumb_down(outlined fill)
thumb_down

thumb_down(outlined)
thumb_down

insert_emoticon(outlined fill)
insert_emotico

insert_emoticon(outlined)
insert_emotico

sentiment_satisfied(outlined fill)
sentiment_satisfied

sentiment_satisfied(outlined)
sentiment_satisfied

account_circle(rounded)
account_circle

account_circle(outlined)
account_circle

sentiment_very_dissatisfied(outlined fill)
sentiment_very_dissatisfied

sentiment_very_dissatisfied(outlined)
sentiment_very_dissatisfied

person(outlined fill)
person

person(outlined)
person

computer(outlined fill)
computer

computer(rounded)
computer

desktop_mac(outlined fill)
desktop_mac

desktop_mac(rounded)
desktop_mac

desktop_windows(outlined fill)
desktop_windows

desktop_windows(rounded)
desktop_windows

laptop_mac(outlined fill)
laptop_mac

laptop_mac(rounded)
laptop_mac

tablet_mac(outlined)
tablet_mac

tablet_android(rounded)
tablet_android

tablet(outlined)
tablet

phone_iphone(rounded)
phone_iphone

phone_android(rounded)
phone_android

smartphone(outlined fill)
smartphone

stay_current_portrait(outlined fill)
stay_current_portrait

stay_current_landscape(outlined fill)
stay_current_landscape

refresh(outlined)
refresh

cloud_queue(outlined)
cloud_queue

cloud_queue(rounded)
cloud_queue

looks_one(outlined)
looks_one

looks_two(outlined)
looks_two

looks_3(outlined)
looks_3

looks_4(outlined)
looks_4

looks_5(outlined)
looks_5

looks_6(rounded)
looks_6

place(rounded)
place

event(rounded)
event

share(outlined)
share

restaurant(outlined)
restaurant

restaurant_menu(outlined)
restaurant_menu

cake(outlined)
cake

lunch_dining(outlined fill)
lunch_dining

local_cafe(outlined)
local_cafe

ramen_dining(outlined fill)
ramen_dining

dinner_dining(outlined)
dinner_dining

set_meal(outlined)
set_meal

soup_kitchen(outlined)
soup_kitchen

bento(outlined fill)
bento

dining(outlined)
dining

toggle_on(outlined)
toggle_on

toggle_off(outlined fill)
toggle_off

2k(outlined)
2k

4k(outlined)
4k

settings_applications(outlined fill)
settings_applications

image(outlined)
image

add_photo_alternate(outlined)
add_photo_alternate

integration_instructions(outlined fill)
integration_instructions

grid_view(outlined)
grid_view

settings(outlined fill)
settings

link(outlined)
link

account_tree(outlined)
account_tree

comment(outlined)
comment

 

アバター

author-primary による

Algorism Inc. 株式会社アルゴリズム 代表取締役。SEO塾運営。このサイトは2023年新発売のWordPressテーマのショーケース