4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Google FontsのMaterial Symbolsで複数のアイコンを読み込む方法

4
Last updated at Posted at 2025-09-01

tl;dr

Material Symbolsを<link rel=で読み込む際、&icon_names=で複数のアイコン名を指定する際は、アルファベット順で書く必要がある。

たとえば以下のように:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=check,dark_mode,light_mode" />

経緯

Material Symbolsを<link rel=で読み込む際、&icon_names=で複数のアイコン名を指定しても読み込めず、con_namesに設定した文字列がそのまま表示されてしまうエラーに直面しました。

絵文字を指定して読み込むのは無理なのか…?と思っていたのですが、つい先日解決方法を見つけました。

なんと、アイコン名はアルファベット順で書く必要があるらしいです。

つまり、

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

ではだめで、

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

と書けば読み込めます。

もっと早く知りたかった。

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?