今回の仕上がり
保存したpauseを「一時停止」という文字と並べました。押すと自作の秒数カウンターが止まり、文字が「再開」に変わります。実際のゲームや動画を操作する部品ではなく、素材の配置を確かめるための使用例です。
作例を別画面で開く · SVG・自作HTML・ライセンスを保存
pauseを検索し、SVGを選ぶ
公式一覧のSearch iconsへpauseを入力し、Pauseを選びます。今回はMaterial Symbols・Outlined、Weight 400、Grade 0、Optical Size 24、Fill 0の組み合わせです。詳細欄のSVGから保存しました。フォント一式をサイトへ追加したり、ライブラリをインストールしたりする手順ではありません。
似た名前でも、Material Symbolsは現在の系列、Material Iconsは従来の別系列です。確認したファイルの系列と設定を記録し、すべてを同じデータとは扱いません。
imgの隣に、操作の文字を残す
<button type="button"><img src="pause.svg" width="24" height="24" alt="">一時停止</button>この短いHTMLだけでは停止処理は付きません。作例のJavaScriptがボタン操作でカウンターを止め、再開時に進めます。アイコンと同じ意味の文字があるため、画像のaltは空にし、名前を重ねて読ませない形にしました。
今回は保存したSVGの色を変えず、明るいボタンの上で表示しています。暗い背景で黒い図が見えにくい場合は、周りの色と実寸を確認してください。全アイコンの意味、スクリーンリーダー実機、タッチ端末での操作は未検証です。
利用条件と、確認した範囲
公式リポジトリはApache License 2.0で提供しています。作例ZIPには全文を同梱し、Google公式の出典を残しました。改変や再配布では、原文の条件と各ファイルの表記を確認してください。Googleの推薦や商標利用の許可を示す素材ではありません。
Google Fontsでの検索・設定・SVG保存、作例への表示、カウンターの停止・再開を検査しています。PNG、可変フォント、他の太さや全アイコンの検証はしていません。最近のXの流行は未確認。確認日は2026年10月13日、自作HTMLだけはCC0です。