Googleアイコンとは？
Googleアイコン（Material Icons）とは？
Googleアイコン（Material Icons）は、Googleが提供する無料のアイコンセットで、WebサイトやアプリのUIデザインに使われます。シンプルかつ統一感のあるデザインで、さまざまな用途に対応しています。
サイトのナビゲーション（メニューアイコンなど）
ボタンやリンクの視認性向上（お問い合わせボタンにメールアイコンを追加）
情報の整理・強調（チェックマーク、警告アイコンなど）
スマホアプリや管理画面のUIデザイン
GoogleアイコンをWEBサイトに導入する方法
1.CDNを利用する方法（簡単・推奨）
CDNを利用すれば、Googleのサーバーからアイコンフォントを直接読み込めるため、手軽に導入できます。
HTMLの <head> に以下のリンクを追加します。
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">material-iconsクラスを付与して、アイコンを指定します。
これで、HTML内でGoogleアイコンを表示できます。例では「home」アイコンを指定しました。
<span class="material-icons">home</span>各アイコンの名称は公式ページのIcon nameでご確認ください。
2.SVGファイルとして使用する方法
SVG形式で使用すると、カスタマイズ性が高くなります。
Google Fonts の公式ページからアイコンを検索し、SVG形式でダウンロードできます。
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
</svg>3.アイコンをダウンロードして使う方法
Googleの公式ページからPNGやSVGとしてアイコンをダウンロードし、画像として利用することも可能です。
Googleアイコンのカスタマイズ方法
CSSでのカスタマイズ方法
.material-icons {
font-size: 32px;
color: #ff0000;
}font-sizeを変更すればアイコンの大きさを調整可能colorを指定すれば色を変更できる
Material Iconsのスタイルバリエーション
Googleアイコンには以下の5つのバリエーションがあります。
- デフォルト →
home - 枠線だけのスタイル →
home_outlined - 角丸スタイル →
home_rounded - 鋭角スタイル →
home_sharp - 2色のスタイル →
home_twotone
<span class="material-icons-outlined">home</span>
<span class="material-icons-rounded">home</span>
<span class="material-icons-sharp">home</span>
<span class="material-icons-twotone">home</span>GoogleアイコンをWebサイトで活用方法
ナビゲーションメニューにアイコンを追加する
<nav>
<ul>
<li><span class="material-icons">home</span> ホーム</li>
<li><span class="material-icons">info</span> お知らせ</li>
<li><span class="material-icons">contact_mail</span> お問い合わせ</li>
</ul>
</nav>ボタンと組み合わせて視認性を向上させる
<button>
<span class="material-icons">send</span> 送信
</button>よくあるトラブルと解決策
・CDNのリンクが正しく設定されているか確認
・クラス名が間違っていないか確認（material-icons を指定）
・フォントがブロックされていないか確認（ブラウザの開発ツールでエラーをチェック）
CSSとの競合を防ぐ方法
他のフォント設定が上書きされないよう、!important を使用する
.material-icons {
font-family: 'Material Icons' !important;
}フォントサイズやレイアウト崩れの調整方法
アイコンが正しく中央に表示されない場合は、vertical-alignを調整する
.material-icons {
vertical-align: middle;
}まとめ
Googleアイコンを使えば、シンプルで視認性の高いUIデザインを手軽に実現できます。
特にCDNを利用した導入方法が最も簡単でおすすめです。
アイコンを適切にカスタマイズし、デザインを統一することで、より洗練されたWebサイトを作ることが可能です！
ぜひ試してみてください！
コメント