Material Iconsの使い方と活用方法

1. Material Iconsとは？

Material Iconsは、Googleが提供する美しいアイコンセットで、次の特徴があります。

無料で使用可能：商用・非商用問わず、自由に利用可能。
豊富な種類：数千種類のアイコンがあり、UIデザインに適したものが見つかります。
カスタマイズ可能：色やサイズを自由に調整可能。
SVGとフォント形式：CSSフォントとして使うか、SVGとして直接使うこともできます。

2. Material Iconsの使い方

2.1 Google Fontsからの導入（HTML・CSSでの使用）
Google FontsでMaterial Iconsを探す

Google FontsのMaterial Icons にアクセスします。
HTMLにリンクを追加する
以下のコードをHTMLファイルの

内に追加します。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

HTML内でアイコンを表示する
タグにmaterial-iconsクラスを使ってアイコンを指定します。

<span class="material-icons">home</span>

結果：🏠（homeアイコンが表示されます）

2.2 サイズと色のカスタマイズ
1. サイズの変更
CSSでフォントサイズを指定することで、アイコンのサイズを変更できます。

<span class="material-icons" style="font-size:48px;">home</span>

結果：48pxサイズのhomeアイコンが表示されます。

2. 色の変更
CSSでcolorプロパティを使うと、アイコンの色を変更できます。

<span class="material-icons" style="color: red;">favorite</span>

結果：❤️（赤色のfavoriteアイコン）

2.3 Material Iconsのスタイルバリエーション
Material Iconsには、複数のスタイルが用意されています。

Filled（デフォルト）：で使用。

Outlined：枠線だけのスタイル。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
<span class="material-icons-outlined">home</span>

Round：角の丸いデザイン。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
<span class="material-icons-round">home</span>

Two-Tone：2色のデザイン。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone" rel="stylesheet">
<span class="material-icons-two-tone">home</span>

3. SVG形式での利用

アイコンをSVG形式で利用することも可能です。SVGは軽量で拡大・縮小しても画質が劣化しません。

Google FontsのMaterial Iconsページから、使いたいアイコンを検索し、「Download SVG」をクリックしてSVGファイルをダウンロードします。

HTMLにSVGを埋め込む
ダウンロードしたSVGをHTMLファイルに直接挿入します。

<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48">
  <path d="M480 936q-17 0-28.5-11.5T440 896V616H320q-17 0-28.5-11.5T280 576q0-17 11.5-28.5T320 536h120V416q0-17 11.5-28.5T480 376q17 0 28.5 11.5T520 416v120h120q17 0 28.5 11.5T680 576q0 17-11.5 28.5T640 616H520v280q0 17-11.5 28.5T480 936Z"/>
</svg>

4. Material IconsをReactで使う

Material IconsをReactで使用するには、次のような手順を取ります。

Google FontsからリンクをHTMLに追加
public/index.htmlに以下を追加します。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Reactコンポーネントで使用
spanタグを使ってアイコンを表示します。

import React from 'react';

function HomeIcon() {
  return <span className="material-icons">home</span>;
}

export default HomeIcon;

5. アイコンの使いどころとデザインのポイント

ナビゲーションメニュー：ホームアイコンやメニューアイコンで使いやすさを向上。
アクションボタン：お気に入りやシェアのボタンにアイコンを使って直感的なUIを提供。
フィードバック：成功やエラーのアイコンを使ってユーザーに状態を示す。

6. まとめ

Material Iconsは、Googleが提供するオープンソースのアイコンセットで、ウェブサイトやアプリケーションで簡単に使えます。HTMLやCSS、SVG、Reactなど、さまざまな形式で利用でき、UIを向上させるための重要なツールです。

無料で使用可能で、豊富なアイコンセットを活用できます。
色やサイズを自由に変更し、プロジェクトに合わせたデザインが可能です。
ReactやSVGを使った応用も簡単で、幅広い場面で活用できます。

毎日更新していますので、@y-t0910をフォローしていただけると嬉しいです。