GoogleのMaterial Iconsがアイコンフォントとして提供されていると聞いて。
自分用にメモ。
Material Symbols and Icons - Google Fonts
Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.
fonts.google.com
Material Icons Guide | Google Fonts | Google for Developers
developers.google.com
5つのスタイル
5つのスタイルとサンプル。
使いたいスタイルを読み込んでタグを書く。
Outlined
CND
<link href=”https://fonts.googleapis.com/css?family=Material+Icons+Outlined” rel=”stylesheet”>
<span class=”material-icons-outlined”>email</span>
<span class=”material-icons-outlined”>check_circle</span>
<span class=”material-icons-outlined”>content_paste</span>
<span class=”material-icons-outlined”>insert_comment</span>
<span class=”material-icons-outlined”>coffee</span>
<span class=”material-icons-outlined”>check_circle</span>
<span class=”material-icons-outlined”>content_paste</span>
<span class=”material-icons-outlined”>insert_comment</span>
<span class=”material-icons-outlined”>coffee</span>
Filled
CND
<link href=”https://fonts.googleapis.com/css?family=Material+Icons” rel=”stylesheet”>
<span class=”material-icons”>email</span>
<span class=”material-icons”>check_circle</span>
<span class=”material-icons”>content_paste</span>
<span class=”material-icons”>insert_comment</span>
<span class=”material-icons”>coffee</span>
<span class=”material-icons”>check_circle</span>
<span class=”material-icons”>content_paste</span>
<span class=”material-icons”>insert_comment</span>
<span class=”material-icons”>coffee</span>
Rounded
CND
<link href=”https://fonts.googleapis.com/css?family=Material+Rounded” rel=”stylesheet”>
<span class=”material-icons-round”>email</span>
<span class=”material-icons-round”>check_circle</span>
<span class=”material-icons-round”>content_paste</span>
<span class=”material-icons-round”>insert_comment</span>
<span class=”material-icons-round”>coffee</span>
<span class=”material-icons-round”>check_circle</span>
<span class=”material-icons-round”>content_paste</span>
<span class=”material-icons-round”>insert_comment</span>
<span class=”material-icons-round”>coffee</span>
Sharp
CND
<link href=”https://fonts.googleapis.com/css?family=Material+Icons+Sharp” rel=”stylesheet”>
<span class=”material-icons-sharp”>email</span>
<span class=”material-icons-sharp”>check_circle</span>
<span class=”material-icons-sharp”>content_paste</span>
<span class=”material-icons-sharp”>insert_comment</span>
<span class=”material-icons-sharp”>coffee</span>
<span class=”material-icons-sharp”>check_circle</span>
<span class=”material-icons-sharp”>content_paste</span>
<span class=”material-icons-sharp”>insert_comment</span>
<span class=”material-icons-sharp”>coffee</span>
Two-Tone
CND
<link href=”https://fonts.googleapis.com/css?family=Material+Icons+Two+Tone” rel=”stylesheet”>
<span class=”material-icons-two-tone”>email</span>
<span class=”material-icons-two-tone”>check_circle</span>
<span class=”material-icons-two-tone”>content_paste</span>
<span class=”material-icons-two-tone”>insert_comment</span>
<span class=”material-icons-two-tone”>coffee</span>
<span class=”material-icons-two-tone”>check_circle</span>
<span class=”material-icons-two-tone”>content_paste</span>
<span class=”material-icons-two-tone”>insert_comment</span>
<span class=”material-icons-two-tone”>coffee</span>
使いたいものだけ読み込むめばよし。
全部使いたいときはまとめて書く。
CND
<link href=”https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp” rel=”stylesheet”>
便利になりました。
