Google Material Icons(マテリアルアイコン)の設定メモ

headに記述するコード(スタイルシートのリンク)や書き方をいつも忘れるのでメモしておく。

Google Material Icons

Google Material Iconsのリンク

Material Icons (Google Fonts)

Iconのスタイル「Outlined」

線のアイコン。ハートは塗りつぶされてるの、なんでかなー

Iconのスタイル「Filled」

塗りつぶしアイコン

Iconのスタイル「Rounded」

Filledぽいけど、ちょっと丸い。

Iconのスタイル「Sharp」

Filledをさらにカクカクさせたアイコン

Iconのスタイル「Two tone」

線がクッキリ。ツートーン。

Google Material Iconsを設定・実装する

htmlやcssに設置する方法メモ。

HTMLのheadにスタイルのコードを記述

だいたい「Filled」と「Outlined」を使うかな〜

<!-- Filled -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    
<!-- Outlined -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined">
    
<!-- Rounded -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Round">
    
<!-- Sharp -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp">
    
<!-- Two Tone -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone">

<!-- まとめて書くとき -->
<link  rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone">

HTMLに記述するとき

htmlに記述するときは、「Icon font」のコードをコピペ。

例:OutlinedのSearchアイコン

<!-- Searchのアイコンを使うとき -->
<span class="material-icons-outlined">
search
</span>

CSSに記述するとき

cssに記述するときは、「Code point」のコードを使う。

例:OutlinedのSearchアイコン

font-family: 'Material Icons Outlined';
content: '\e8b6';

ちなみに「 \ 」の文字って、キーボードでどう打つねんっ!て、忘れる時がある。
「 \ 」は、option + ¥ で出るよ。(Mac)

// Filled
font-family: 'Material Icons';

// Outlined
font-family: 'Material Icons Outlined';

// Rounded
font-family: 'Material Icons Round';

// Sharp
font-family: 'Material Icons Sharp';

// Two Tone
font-family: 'Material Icons Two Tone';

ABOUT US

yukipan
Web制作会社で働いてます。パンダとかリラックマとか、まあるいものが好き。好奇心旺盛で、何にでも興味をもってしまう。とりあえずやってみてから取捨選択するのがモットー。今はグリーンカレーとチャイと株式投資がブーム。