Googleのアイコンフォント

らら
らら

Googleのアイコンフォント

はじめに

今回は、Googleのアイコンフォント、Material Icons（マテリアルアイコン）の紹介です。

Googleが提供するオープンソースになります。

こちらは、Google Fontsに統合されてGoogle Fonts Iconsとも呼ばれています。

Material Iconsの使い方

表示内容は下記から見られます。

https://fonts.google.com/icons?icon.set=Material+Icons&icon.style=Outlined

githubから元を落として自サーバにいれることも、SVGファイルもあります。

https://github.com/google/material-design-icons

まずはGoogle Fontsで見てみます

Material Icons

上記のタイプにより

Outlined,Filled,Rounded,Sharp,Two tone毎にCSSの呼び出しが異なります。

Outlined


<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">

Filled


<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Rounded


<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">

Sharp


<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp" rel="stylesheet">

Two tone


<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone" rel="stylesheet">

全のせは・・


<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone" rel="stylesheet">

HTMLに組み込むには、

Material Icons

上記で選択するとタグが表示されるので

タイプによってクラス名にmaterial-icons-タイプ名が入るので注意が必要です。

コピペで可能です。spanで生成されますがclass="material-icons-outlined"とsettingsの部分があっていれば

別のタグでも使用可能です。


<span class="material-icons-outlined">settings</span>

関連記事