【Webフォントアイコン】Material Symbolsの使い方

Webフォントアイコン

今回はWebフォントアイコン「Material Symbols」の紹介と、基本の使い方について解説します。

Material Symbolsとは

「Material Symbols」はGoogleが提供するWebフォントアイコンです。

外部CSSの読み込み・CSSファイルの設定と、簡単なHTMLをコピー&ペーストするだけでアイコンを使用することができます。

Material Symbolsの使い方

基本の使い方

手順
  1. 公式サイトを開く
  2. 公式サイト上部にあるアイコンスタイルを選択
アイコンのスタイル特徴
Outline一般的なアイコン
RoundedOutlineより丸みのあるアイコン
SharpOutlineより丸みのないアイコン
  1. 画面右側にある「Customization」欄で、アイコンの詳細設定を行う
項目名内容
Fill塗りつぶしするかどうか
Weightアイコンの線の太さ
Gradeライトモード・ダークモード時の見え方の微調整
Optical Sizeアイコンサイズの設定
  1. 使用したいアイコンを選択
  2. 画面右側に表示される情報から「Static icon font」欄の外部CSSの読み込みコード(<link ~ />をコピーして、HTMLファイルの<head>~</head>に張り付け
  1. 「Inserting the icon」欄の<span>~</span>をコピーして、HTMLファイル内のアイコンを設置したい場所にペースト
  1. アイコンの表示を確認

疑似要素(:before, :after)にアイコンを設定する

以下の例では.icon-testの疑似要素(:before)に、Roundedスタイルの「Homeアイコン」を設定しています。

手順
  1. 使用したいアイコンを選択
  2. 画面右側に表示される情報から「Code point」欄のコードをコピー
    (Homeアイコンの場合は「e88a」)
  1. 疑似要素のcontentコピーしたコードを張り付け、先頭に\を付ける
  2. 疑似要素のfont-familyに「Material Symbols <アイコンスタイル>」を設定
.icon-test::before {
    content: "\e88a";
    font-family: "Material Symbols Rounded";
}
  1. 作成したCSSクラスをHTMLに設置し、アイコンの表示を確認

大抵の場合、このままではサイズや文字の縦位置に違和感があるので、「font-size」や「vertical-align」と一緒に設定する


タイトルとURLをコピーしました