WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： くりりん
カテゴリー： マークアップ >サービス

Google Fontsのサイトデザインが一新されました。左側にサイドメニューがあり、フォントが表示されるエリアが広く設けられていますね。
そしてアイコンフォントが探せるようにフィルタやカテゴリ一覧もあります。
今までFontAwesomeをよく使用していましたが、今回はGoogle Fontsでも使用できるアイコン【Material Symbols】をご紹介します！

Material Symbolsとは

Material SymbolsはGoogleが公式に提供するオープンソースのアイコンフォントサービスです。もちろん無料で使用可能です！
Material Symbols

Material Symbolsには、「Outlined（一般的なアイコンの形状）」「Rounded（Outlinedに比べ角が丸くなる）」「Sharp（Outlinedに比べ角の丸みがなくなる）」と3つのスタイルがあります。
そして3つのスタイルで「Fill」「Weight」「Grade」「Optical size」の4つの可変軸を調節することができます。

4つの可変軸は下記のように値を決めることが可能です。

• 【Fill】塗りつぶしを0（なし）～1（あり）で指定。
• 【Weight】線の太さを100（細）～700（太）の間で指定。
• 【Grade】線の太さを100（細）～700（太）の間で指定。
• 【Optical size】アイコンのサイズに応じて線の太さを自動的に調整。20dp～48dpの間で指定。

Material Symbolsの使い方

Google Fonts内、左サイドバーにある【Icons】をクリックすると、アイコンの一覧が表示されます。
さらに【Filters】というボタンをクリックすると、左からサイドバーが出現します。下の方にスクロールするとカテゴリーがあるので、絞り込んでアイコンを探しましょう。
画面上部にある【Search icons】でも検索は可能ですが、日本語ではヒットしないので英語を入れてみてください。

使用したいアイコンが見つかったらクリックをします。すると右からサイドバーが現れます。
制作しているサイト内でMaterial Symbolsを使えるようにするためにスタイルシートを読み込みましょう。
下記のようなスタイルシートが生成されているのでコピーしてソースコードに貼り付けます。

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

URLのパラメーターの部分にアイコンのスタイルと可変軸を決めて指定をします。すでにデフォルトの設定が入っていますが【Material Symbolsとは】で説明をしたように必要に応じてスタイルと可変軸を自由に変更してみてください。
左のサイドバーにある【Customize】からスライダーを動かすことで変更できます。

HTMLで記述する

アイコン選択時に右のサイドバーに【Inserting the icon】というのが表示されていて、これがHTMLに記述するコードになります。

コピー＆ペーストして使用してみると、下記のように表示がされたかと思います。

See the Pen
Material Symbols by saki kurita (@saki_0415)
on CodePen.

CSSファイルに記述する

【Variable icon font】のstyleタグの中身をCSSに貼り付けます。

またサイズ変更やフォントカラーを変更する時もCSSにクラスなどを準備しておくと管理がしやすくなります！

.material-symbols-outlined{
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
 }

/* アイコンのサイズを変更するためのClass */
.material-symbols-outlined.md-18 { font-size: 18px; }
.material-symbols-outlined.md-24 { font-size: 24px; }
.material-symbols-outlined.md-36 { font-size: 36px; }
.material-symbols-outlined.md-48 { font-size: 48px; }

疑似要素で記述する

【Code point】をコピーして疑似要素として表示させることもできます。

.material-symbols-outlined{
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
 }

/* アイコンのサイズを変更するためのClass */
.material-symbols-outlined.md-18 { font-size: 18px; }
.material-symbols-outlined.md-24 { font-size: 24px; }
.material-symbols-outlined.md-36 { font-size: 36px; }
.material-symbols-outlined.md-48 { font-size: 48px; }

/* 疑似要素で表示 */
.icon:after {
  font-family: "Material Symbols Outlined";
  content: "\e87d";
  font-size: 2.4em;
  color: tomato;
}
.class::before {
  font-family: 'Material Icons';
  content: '\e8dc';
  color: tomato;
}

まとめ

設定が色々とあるため複雑ではありますが、普段使用しているWebアイコンとは別のものを使ってみたいという時には、ぜひ使用してみてください！