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" />
と書けば読み込めます。
もっと早く知りたかった。