Material Design Icons (MDI) 徹底解説：使い方、導入方法、全アイコン一覧

By /

Material Design Icons (MDI) 徹底解説：使い方、導入方法、全アイコン一覧

ウェブサイトやアプリケーションのユーザーインターフェース（UI）において、アイコンは視覚的な情報を素早く伝え、操作を直感的に理解させるための重要な要素です。テキストだけでは伝わりにくい機能を、アイコン一つで表現することで、ユーザーエクスペリエンス（UX）を大幅に向上させることができます。

数多くのアイコンライブラリが存在する中で、特に人気があり、多くの開発者やデザイナーに利用されているのが「Material Design Icons (MDI)」です。Googleが提唱するMaterial Designの思想に基づきながらも、コミュニティによって運営・拡張されており、その膨大なアイコン数と多様性から、幅広いプロジェクトで活用されています。

この記事では、Material Design Icons (MDI) をこれから使いたいと考えている方、すでに使っているけれどもっと深く理解したいと考えている方を対象に、MDIの基本的な特徴から、実際の導入方法、様々な使い方、そしてその膨大なアイコンをどのように探せば良いのかまでを、徹底的に解説します。約5000語にわたる詳細な説明を通じて、MDIをあなたのプロジェクトで最大限に活用できるようになることを目指します。

1. はじめに：アイコンの重要性とMaterial Design Icons (MDI) とは

1.1. アイコンがUI/UXにもたらすもの

優れたUI/UXデザインにおいて、アイコンは単なる装飾品ではありません。以下のような重要な役割を果たします。

  • 視覚的な手がかり: ユーザーはテキストを読むよりも早くアイコンを認識できます。これにより、情報の処理速度が向上し、インターフェースのナビゲーションがスムーズになります。
  • 操作の明確化: アイコンは特定の操作（保存、削除、設定など）と強く関連付けられており、ユーザーがその機能を直感的に理解するのを助けます。
  • スペースの節約: 限られた画面スペースの中で、アイコンは多くの情報をコンパクトに表現できます。特にモバイルデバイスのように画面が小さい環境では不可欠です。
  • デザインの一貫性: デザインシステムの一部として統一されたスタイルのアイコンを使用することで、プロダクト全体の見た目に一貫性が生まれ、プロフェッショナルな印象を与えます。
  • 国際化対応: 言語に依存しないため、様々な言語のユーザーに対して普遍的な理解を提供できます。

しかし、質の低いアイコンやデザインテーマに合わないアイコンを使用すると、かえってUI/UXを損なう可能性もあります。そのため、一貫性があり、分かりやすく、多様なニーズに対応できるアイコンライブラリの選択が重要となります。

1.2. Material Designとは

Material Designは、Googleが2014年に提唱したデザインシステムです。物理的な世界（紙やインク）のメタファーを取り入れつつ、デジタルの世界ならではのアニメーションや奥行き、影を組み合わせることで、直感的で統一感のあるユーザーインターフェースの構築を目指しています。明確な階層、意味のあるアニメーション、鮮やかな色彩などが特徴です。

1.3. Material Design Icons (MDI) とは

Material Design Icons (MDI) は、このMaterial Designガイドラインに準拠したアイコンを提供するプロジェクトです。ただし、ここで少し注意が必要です。Googleが公式に提供しているMaterial Iconsは、Material Design Iconsとは別のものです。

  • Google公式 Material Icons (現在は Material Symbolsへ移行): Googleが公式に提供していたアイコンセット。シンプルで洗練されたスタイルが特徴でした。現在は、よりカスタマイズ性の高いVariable Font形式の「Material Symbols」に進化しています。
  • Material Design Icons (MDI) Community Edition: こちらが本記事で主に扱うMDIです。当初はGoogle公式アイコンを補完する形で始まりましたが、現在ではコミュニティ主導で開発されており、Google公式のアイコンよりもはるかに多くの、そして多様なスタイルのアイコンが含まれています。公式ガイドラインのスタイルを踏襲しているものが多いですが、コミュニティからの貢献によって、よりニッチな、あるいは特定の業界やアプリケーションに特化したアイコンも豊富に提供されています。本記事では、断りがない限り「MDI」はCommunity Editionを指します。

1.4. MDIの特徴

MDI Community Editionには、他のアイコンライブラリと比較して以下のような特徴があります。

  • 圧倒的なアイコン数: 執筆時点で8000種類を超えるアイコンが提供されており、日常的なものから専門的なものまで、ほとんどのニーズに対応できます。また、日々新しいアイコンが追加されています。
  • デザインの一貫性: Google公式のMaterial Designガイドラインを意識してデザインされたアイコンが多いため、Material DesignベースのUIに自然に馴染みます。
  • 多様なアイコン: 標準的な塗りつぶしスタイルのアイコンに加え、アウトラインやその他のスタイルのアイコンも増えてきています。
  • カスタマイズが容易: Webフォントとして利用する場合、CSSの font-size プロパティでサイズを、color プロパティで色を簡単に変更できます。
  • 様々な形式で提供: Webフォント（WOFF2, WOFF, TTFなど）、SVG、PNGといった形式で提供されており、Web開発、モバイル開発、デスクトップアプリケーション、デザインツールなど、様々な環境で利用可能です。
  • オープンソース: SIL Open Font License 1.1およびApache License 2.0のもとで提供されており、個人・商用を問わず無償で利用できます。

これらの特徴から、MDIはMaterial Designを採用したプロジェクトだけでなく、幅広いプロジェクトにおいて、その豊富なアイコンセットを活かして利用されています。

2. Material Design Icons (MDI) の導入方法

MDIをプロジェクトに導入する方法はいくつかあります。利用する環境やプロジェクトの規模に応じて最適な方法を選択できます。ここでは、主にWebサイトやWebアプリケーションで利用する場合の代表的な方法を解説します。

2.1. Webサイトでの利用：CDN (Content Delivery Network) を利用する方法

最も手軽にMDIを利用する方法は、CDN経由で提供されているCSSファイルを読み込む方法です。これにより、自分でフォントファイルをダウンロード・配置する必要がなく、すぐにアイコンを使い始めることができます。

メリット:

  • 導入が非常に簡単で迅速。
  • サーバーの負荷を軽減できる。
  • ユーザーがすでに他のサイトで同じCDNからファイルを読み込んでいる場合、ブラウザのキャッシュが利用されて読み込みが速くなる可能性がある。
  • 常に最新版のアイコンを利用できる（バージョン指定も可能）。

デメリット:

  • CDNサーバーがダウンした場合、アイコンが表示されなくなる可能性がある（ただし、主要なCDNは非常に安定しています）。
  • オフライン環境では利用できない。
  • 特定のバージョンを厳密に固定したい場合に、バージョン指定の管理が必要になる。

導入手順:

HTMLファイルの<head>セクションに、以下の<link>タグを追加します。

“`html


“`

上記の例では、jsDelivrというCDNを利用して、バージョン7.4.47のMDIのCSSファイルを読み込んでいます。最新のバージョンや他のCDNプロバイダー（例：cdnjs）を利用したい場合は、Material Design Iconsの公式サイト（materialdesignicons.com）や主要なCDN提供サイトで確認してください。

<link>タグの属性について簡単に説明します。

  • rel="stylesheet": 読み込むファイルがスタイルシートであることを示します。
  • href="...": CSSファイルのURLを指定します。
  • integrity="...": サブリソース完全性（Subresource Integrity, SRI）チェックのためのハッシュ値です。これにより、CDNから配信されるファイルが改ざんされていないかを確認できます。セキュリティのために設定することが強く推奨されます。ハッシュ値はCDN提供サイトで確認できます。
  • crossorigin="anonymous": SRIを使用する場合に必要です。クロスオリジンリソースに対して認証情報（クッキーなど）を送信しないように指定します。

この一行をHTMLに追加するだけで、MDIのフォントと基本的なスタイルが読み込まれ、準備完了です。

2.2. Webサイトでの利用：セルフホスティングする方法

プロジェクトのディレクトリにMDIのフォントファイルとCSSファイルをダウンロードし、自分のサーバーから配信する方法です。

メリット:

  • オフライン環境でも利用可能。
  • CDNの可用性に依存しない。
  • 使用するバージョンを完全にコントロールできる。
  • ビルドプロセスに組み込んで、CSSやフォントファイルを最適化したり、必要なアイコンだけをバンドルしたり（この方法はMDIの通常利用では一般的ではないですが、理論上可能）といった高度な制御が可能。

デメリット:

  • 導入に少し手間がかかる。
  • フォントファイルのサイズが大きい場合、ページの読み込み速度に影響を与える可能性がある。
  • バージョンアップの管理を自分で行う必要がある。

導入手順:

セルフホスティングの方法はいくつかありますが、現代のWeb開発ではnpmやYarnといったパッケージマネージャーを利用するのが一般的です。

a. npmまたはYarnを利用する方法:

  1. プロジェクトのルートディレクトリでターミナルを開き、以下のコマンドを実行してMDIのフォントパッケージをインストールします。

    “`bash

    npmの場合

    npm install @mdi/font

    Yarnの場合

    yarn add @mdi/font
    “`

    これにより、node_modules/@mdi/font ディレクトリ以下にMDIのCSSファイルやフォントファイルがダウンロードされます。

  2. プロジェクトのCSSファイルから、インストールしたMDIのCSSファイルを読み込みます。フレームワークやビルドツール（Webpack, Parcel, Viteなど）を使用している場合、エントリーポイントとなるCSSやSass/Lessファイルで @import 文を使用するのが一般的です。

    “`css
    / style.css または style.scss /
    @import ‘~@mdi/font/css/materialdesignicons.css’;

    / もしくは、より軽量な minified 版 /
    / @import ‘~@mdi/font/css/materialdesignicons.min.css’; /
    “`

    ~ は、多くのビルドツールにおいて node_modules ディレクトリを指すエイリアスとして機能します。

    ビルドツールを使用していない場合や、静的なHTMLファイルから直接読み込みたい場合は、node_modules ディレクトリからCSSファイルとフォントファイルをpublicディレクトリなどにコピーし、HTMLから<link>タグで参照する必要があります。

    例: node_modules/@mdi/font/css/materialdesignicons.min.css と node_modules/@mdi/font/fonts/ ディレクトリの中身を public/css/ と public/fonts/ にコピーした場合。

    html
    <head>
    <link rel="stylesheet" href="/public/css/materialdesignicons.min.css">
    </head>

    CSSファイル (materialdesignicons.min.css) の中身を見ると、@font-face ルールでフォントファイル（mdi.woff2, mdi.woff, mdi.ttf など）が相対パスで指定されていることが分かります。そのため、CSSファイルから見て正しいパスにフォントファイルを配置する必要があります。通常、CSSファイルと同じ階層か、CSSファイルの一つ上の階層の fonts ディレクトリに配置することが想定されています。

b. ファイルを直接ダウンロードする方法:

npm/Yarnを使わない場合は、Material Design IconsのGitHubリポジトリや公式サイトから最新のリリース版のZIPファイルをダウンロードし、その中にある css ディレクトリと fonts ディレクトリをプロジェクトの適切な場所にコピーして、HTMLからCSSファイルを読み込む方法です。

この方法でも、CSSファイル内の @font-face ルールが参照するフォントファイルのパスが正しいかを確認し、必要に応じて調整する必要があります。

2.3. デザインツールでの利用

Figma, Sketch, Adobe XDなどのデザインツールでもMDIを利用できます。

  • フォントのインストール: MDIはフォントファイル（TTF形式など）としても提供されています。これらのフォントファイルをOSにインストールすれば、テキストツールを使ってアイコンを入力できるようになります。ただし、特殊な文字コードを入力する必要があるため、あまり一般的ではありません。
  • プラグインの利用: FigmaやSketchには、MDIを簡単に検索・挿入できるプラグインが多数存在します。これらのプラグインを利用するのが最も効率的です。
  • SVGのインポート: 必要に応じて、個別のアイコンをSVG形式でダウンロードし、デザインツールにインポートして利用することも可能です。

2.4. 開発フレームワーク/ライブラリでの利用

Vue.js, React, AngularなどのJavaScriptフレームワークや、Vuetify, Material UI (MUI), Angular MaterialといったUIライブラリを使用している場合、MDIを統合するための専用コンポーネントや設定が用意されていることが多いです。

  • Vuetify (Vue.js): VuetifyはMDIをデフォルトのアイコンセットとして強くサポートしています。mdi-<icon-name> というクラス名や $mdi シンタックス (<v-icon>$mdi-home</v-icon>) を使用して簡単にMDIアイコンを表示できます。npmで @mdi/font をインストールするだけで、Vuetifyが自動的にMDIを読み込むように設定されていることが多いです。
  • React (MUIではない): ReactでMDI Communityアイコンを使用する場合は、mdi-react のようなコミュニティ製のラッパーライブラリを利用するか、標準的なWebフォントとして導入して <i> タグなどで使用します。
  • Angular (Angular Materialではない): Angular MaterialはGoogle公式のMaterial Symbols/Iconsを使用することが多いですが、MDIを使いたい場合は @mdi/angular-material のようなコミュニティ製ライブラリを利用するか、Webフォントとして導入します。

各フレームワークやライブラリのドキュメントを参照して、推奨されるMDIの導入・利用方法を確認してください。多くの場合は、npmで @mdi/font をインストールし、特定のファイルをインポートするだけで準備が完了します。

3. Material Design Icons (MDI) の使い方

MDIを導入したら、実際にアイコンを表示させてみましょう。基本的な使い方は非常にシンプルです。

3.1. 基本的な使い方（HTML/CSS）

MDIをWebフォントとして使用する場合、通常はHTMLの<i> または <span> 要素に特定のCSSクラスを付与することで表示します。

基本的な構文は以下の通りです。

html
<i class="mdi mdi-<icon-name>"></i>

または

html
<span class="mdi mdi-<icon-name>"></span>

  • mdi: これはMDIフォントファミリーを適用するためのベースクラスです。このクラスがないと、アイコンのスタイルが適用されません。
  • mdi-<icon-name>: これが表示したい特定のアイコンを指定するためのクラスです。<icon-name> の部分には、表示したいアイコンの名前を小文字のスネークケース（単語間をハイフンで繋ぐ形式）で指定します。

例:

  • ホームアイコンを表示したい場合: <i class="mdi mdi-home"></i>
  • 設定アイコンを表示したい場合: <i class="mdi mdi-settings"></i>
  • メニューアイコンを表示したい場合: <i class="mdi mdi-menu"></i>
  • ゴミ箱アイコンを表示したい場合: <i class="mdi mdi-delete"></i>

ブラウザはこれらのクラス名を見て、CSSで定義されたMDIフォントの中から対応するグリフ（アイコンの形状）を探し、表示します。<i> タグは伝統的にアイコン用途で使われることが多いためよく利用されますが、特に意味的な役割を持たせない場合は <span> タグでも構いません。

アイコン名の調べ方:

使用したいアイコンの正確なクラス名 (<icon-name>) を知るには、Material Design Iconsの公式サイト（https://materialdesignicons.com/）を利用します。公式サイトには強力な検索機能と全アイコンの一覧が用意されています（後述の「全アイコン一覧と検索方法」セクションで詳しく解説します）。

3.2. サイズの変更

アイコンのサイズは、CSSの font-size プロパティを使って簡単に変更できます。MDIはWebフォントなので、テキストと同じようにサイズを調整できます。

html
<i class="mdi mdi-home"></i> <!-- デフォルトサイズ -->
<i class="mdi mdi-home" style="font-size: 24px;"></i> <!-- 24pxに設定 -->
<i class="mdi mdi-home large-icon"></i> <!-- CSSクラスで設定 -->

css
.large-icon {
font-size: 48px; /* サイズを大きく */
}

デフォルトのサイズは通常 1em で、これは親要素のフォントサイズに依存します。標準的なアイコンサイズとしては 24px がよく使われます。

ヘルパークラス（非公式）:

Material Icons（Google公式）には md-18, md-24, md-36, md-48 といったサイズのヘルパークラスが用意されていますが、MDI Community版には公式に定義されたこのようなヘルパークラスは含まれていません。必要であれば、自分でCSSで定義することができます。

css
.mdi-18px { font-size: 18px; }
.mdi-24px { font-size: 24px; } /* よく使うサイズ */
.mdi-36px { font-size: 36px; }
.mdi-48px { font-size: 48px; }

そしてHTMLで <i class="mdi mdi-home mdi-24px"></i> のように使用します。

3.3. 色の変更

アイコンの色も、CSSの color プロパティを使ってテキストと同じように変更できます。

html
<i class="mdi mdi-check"></i> <!-- デフォルト色（通常は親要素のテキスト色） -->
<i class="mdi mdi-check" style="color: green;"></i> <!-- 緑色に設定 -->
<i class="mdi mdi-check error-icon"></i> <!-- CSSクラスで設定 -->

css
.error-icon {
color: red; /* 赤色に設定 */
}

Material Designのカラーパレットに合わせて色を設定することも可能です。

3.4. 回転と反転

MDIフォントには、特定のヘルパークラスを使ってアイコンを回転させたり反転させたりする機能が用意されています。これは、例えばロード中のスピナーや、方向を示す矢印アイコンなどで便利です。

  • 回転: mdi-rotate-<degrees> (degreesは45, 90, 135, 180, 225, 270, 315のいずれか)
  • 反転: mdi-flip-h (水平反転), mdi-flip-v (垂直反転)

html
<i class="mdi mdi-refresh mdi-rotate-45"></i> <!-- 45度回転 -->
<i class="mdi mdi-arrow-right mdi-flip-h"></i> <!-- 水平反転して左向き矢印に -->

これらのヘルパークラスは、MDIのCSSファイル内に定義されています。複数のクラスを組み合わせて使用することも可能です（例：mdi-rotate-90 mdi-flip-v）。

3.5. アニメーション

スピナーなど、継続的にアニメーションするアイコンを表示したい場合は、mdi-spin クラスを使用します。

html
<i class="mdi mdi-loading mdi-spin"></i>
<i class="mdi mdi-sync mdi-spin"></i>

mdi-spin クラスは、アイコンを無限に回転させるCSSアニメーションを適用します。

3.6. アクセシビリティ (Accessibility)

アイコンは視覚的な情報を提供しますが、スクリーンリーダーを使用しているユーザーにとっては、アイコンの意味が伝わらない場合があります。アクセシビリティを考慮して、アイコンを適切に扱うことが重要です。

  • 装飾的なアイコン: アイコンが単なる装飾であり、隣にテキストで同じ情報が提供されている場合など、コンテンツの理解に不可欠でない場合は、スクリーンリーダーがアイコンを読み上げないようにする必要があります。これには aria-hidden="true" 属性を使用します。

    html
    <i class="mdi mdi-information" aria-hidden="true"></i> 詳細情報

  • 情報を提供するアイコン: アイコンが重要な情報や操作を示しており、テキストによる説明がない場合は、スクリーンリーダー向けに代替テキストを提供する必要があります。これは、aria-label 属性を使用するか、視覚的には非表示だがスクリーンリーダーには読み上げられる <span> 要素などを併用して実現できます。

    “`html



    “`

sr-only クラスはBootstrapなどでよく使われるアクセシビリティのためのCSSユーティリティクラスで、要素を画面外に配置するなどして視覚的には見えないようにしますが、スクリーンリーダーはこれを読み上げます。

これらのアクセシビリティ対応を行うことで、より多くのユーザーにとって使いやすいインターフェースを実現できます。

3.7. その他の使い方（SVG, JSなど）

MDIはWebフォントとして使うのが一般的ですが、SVGファイルとしてダウンロードしたり、特定のライブラリを使ってJavaScriptから直接アイコンを操作したりすることも可能です。

  • SVGとして使用: 高解像度での表示や、特定のデザインツールでの利用、あるいはWebフォントの読み込みによる表示遅延を避けたい場合などに、公式サイトから個別のアイコンをSVGファイルとしてダウンロードし、<img> タグやインラインSVGとして埋め込むことができます。SVGはベクトル形式なので、拡大しても劣化しません。
  • JavaScriptライブラリ: @mdi/js のようなライブラリを使用すると、アイコンデータをJavaScriptモジュールとしてインポートし、SVGパスデータとして利用できます。これは、ReactやVueなどのフレームワークでコンポーネントとしてアイコンを扱いたい場合や、Canvasなどに描画したい場合に便利です。

これらの方法は、基本的なWebフォントとしての利用よりも少し複雑になりますが、特定の要件を満たすために非常に有効です。

4. 全アイコン一覧と検索方法

MDIの最大の特徴の一つは、その膨大なアイコン数です。現在8000種類以上のアイコンが提供されており、今後も増え続けます。これらのアイコンの中から目的のものを見つけ出すには、公式サイトの活用が不可欠です。

4.1. Material Design Icons 公式サイトの活用

MDIの公式サイト（https://materialdesignicons.com/）は、アイコンを探し、使い方を確認するための主要なリソースです。

サイトにアクセスすると、広大なアイコンのグリッドが表示されます。

4.2. アイコン検索機能

最も一般的なアイコンの探し方は、サイト上部にある検索バーを使うことです。

  • キーワード検索: 探したいアイコンに関連するキーワード（例: “settings”, “email”, “phone”, “save”, “delete” など）を入力すると、入力に応じてアイコンが絞り込まれて表示されます。日本語で検索しても、ある程度は関連するアイコンが表示されることがありますが、基本的には英語のキーワードで検索するのが最も効果的です。
  • 複数のキーワード: スペースで区切って複数のキーワードを入力すると、AND検索のように機能し、より絞り込んだ検索ができます。
  • タグ: 各アイコンには関連するタグ（カテゴリやコンセプト）が付けられています。検索結果で特定のタグをクリックしたり、検索キーワードにタグ名を含めたりすることで、絞り込みが可能です。

検索結果はリアルタイムで更新され、一致度の高いアイコンが上位に表示されます。

4.3. カテゴリ別のブラウジング

特定の種類のアイコンを探している場合、サイトのナビゲーションやフィルター機能を使ってカテゴリ別にアイコンを絞り込むことができます。公式サイトには、”Web”, “Account”, “Alert”, “Communication”, “Editor”, “Hardware”, “Home Automation” など、多岐にわたるカテゴリが用意されています。カテゴリを絞り込むことで、関連性の高いアイコンをまとめて確認できます。

4.4. アイコンの詳細ページ

検索結果や一覧から特定のアイコンをクリックすると、そのアイコンの詳細ページが表示されます。詳細ページには以下の情報が含まれています。

  • アイコン名: アイコンの正式な名前（例: account-circle）。これがCSSクラス名 mdi-<icon-name> の <icon-name> 部分になります。
  • コードポイント: アイコンに割り当てられたユニコードのコードポイント（例: F0004）。WebフォントとしてCSSのcontentプロパティなどで直接指定する場合に必要になりますが、通常はクラス名を使うためあまり意識する必要はありません。
  • エイリアスとタグ: 同じアイコンにアクセスできる別の名前（エイリアス）や、関連するタグが表示されます。
  • 各種形式での利用方法:
    • Webfont: HTMLでの基本的な <i class="mdi mdi-<icon-name>"></i> の使い方例が表示されます。「Copy CSS Class」や「Copy HTML」ボタンがあり、クリック一つでコードをコピーできます。
    • SVG: SVGコードや、<img> タグでの利用例が表示されます。SVGファイルをダウンロードするボタンもあります。
    • JS: @mdi/js ライブラリを使ったJavaScriptでのインポート・利用方法例が表示されます。
    • Other: PNG形式でのダウンロードオプションなどが表示されます。
  • アイコンのプレビュー: アイコンの見た目が大きく表示され、サイズや色の変更をシミュレーションできる機能が付いていることもあります。

公式サイトの詳細ページは、アイコンの使い方に迷った際に非常に役立ちます。特に「Copy CSS Class」や「Copy HTML」ボタンは、開発効率を大幅に向上させます。

4.5. アイコン名の命名規則

MDIのアイコン名は、一般的に機能や対象を表す英単語を小文字スネークケースで繋いだ形式になっています（例: power-settings, cellphone-android, cloud-upload）。一貫性のある命名規則は、アイコン名を推測したり、検索したりする際に役立ちます。公式サイトで複数のアイコンの名前を眺めることで、この規則性にある程度慣れることができます。

4.6. 新しいアイコンのリクエストと貢献

公式サイトやGitHubリポジトリを通じて、コミュニティに新しいアイコンの追加をリクエストしたり、自分でデザインしたアイコンを貢献したりすることができます。MDIのアイコン数がこれほど豊富なのは、活発なコミュニティの存在があってこそです。

4.7. バージョニング

MDIは継続的に開発されており、新しいアイコンが追加されたり、既存のアイコンが修正されたりします。@mdi/font パッケージやCDNのURLにはバージョン番号が含まれており、特定のバージョンを指定して利用できます。新しいアイコンを利用したい場合や、既存のアイコンの変更を取り込みたい場合は、バージョンを更新する必要があります。

5. MDI Community と Material Symbols の違い

前述の通り、Google公式のMaterial IconsはMaterial Symbolsへと進化しました。MDI Community Editionは、Google公式とは別のプロジェクトとして存在しています。この二つのアイコンセットの違いを理解しておくことは、どちらを選ぶか、あるいは両方をどのように使い分けるかを検討する上で重要です。

5.1. Material Symbols (Google公式)

Material Symbolsは、GoogleがMaterial Design 3に合わせてリリースした新しい公式アイコンセットです。Material Iconsからの最大の進化は、Variable Font技術を採用している点です。

  • Variable Font: 一つのフォントファイルに複数のデザインバリエーションが含まれており、CSSやコードからこれらのバリエーションを制御できます。
  • カスタマイズ性: WEIGHT (太さ), FILL (塗りつぶしの度合い), GRADE (視覚的な重み), OPTICAL_SIZE (サイズに応じた線の調整) といった軸を調整することで、アイコンの見た目を非常に細かくカスタマイズできます。これにより、様々なデザインニーズに柔軟に対応できます。
  • スタイル: Filled (塗りつぶし), Outlined (線), Rounded (角丸), Sharp (角ばった), Two-Tone (2色) といったスタイルが提供されており、これらのスタイル間をシームレスに補間できる軸も含まれています。
  • アイコン数: MDI Communityほどではありませんが、主要なアイコンは網羅されています。
  • 提供形式: Webフォント (WOFF2), SVG, PNGとして提供されます。
  • ライセンス: Apache License 2.0。

Material Symbolsは、Google公式の最新のデザインシステムに準拠しており、Variable Fontによる高いカスタマイズ性が魅力です。

5.2. MDI Community Edition

  • アイコン数: Material Symbolsを圧倒的に凌駕する数多くのアイコンを提供しています。コミュニティからの多様な貢献により、非常にニッチなアイコンや、Material Designの標準的なスタイルから少し外れたアイコンも含まれています。
  • スタイル: 主に塗りつぶしスタイルのアイコンが中心ですが、アウトラインやその他のスタイルも徐々に増えています。ただし、Material SymbolsのようなVariable Fontによる無段階なスタイル調整はできません。
  • デザインの一貫性: 全体としてMaterial Designのスタイルを目指していますが、コミュニティからの貢献のため、アイコンによってはデザインに若干のばらつきが見られる可能性もゼロではありません（ただし、プロジェクト側で品質管理は行われています）。
  • 提供形式: Webフォント (WOFF2, WOFF, TTFなど), SVG, PNG, JSライブラリなど、非常に多くの形式で提供されています。
  • ライセンス: SIL Open Font License 1.1 および Apache License 2.0。
  • 開発主体: コミュニティ主導。

MDI Community Editionは、そのアイコン数の豊富さと、様々な開発環境・形式での利用しやすさが最大の強みです。

5.3. どちらを選ぶべきか？

  • Google公式の最新Material Design 3に厳密に準拠し、高いカスタマイズ性を求める場合: Material Symbolsが第一の選択肢となるでしょう。特にVariable Fontによる柔軟なスタイル調整は強力です。
  • とにかく多くのアイコンが必要で、ニッチなアイコンも使いたい場合: MDI Community Editionが圧倒的に有利です。日常的なアイコンから専門的なアイコンまで、ほとんどのケースで必要なアイコンを見つけることができるでしょう。
  • Material Designのスタイルが好きだが、特定のフレームワーク（Vuetifyなど）がMDIを推奨/デフォルトとしている場合: そのフレームワークの推奨に従ってMDI Community Editionを使用するのがスムーズです。
  • 既存プロジェクトでMaterial Icons/MDI Communityをすでに使用しており、大きな変更をしたくない場合: そのまま既存のアイコンセットを継続するのが現実的です。Material Iconsを使用している場合は、Material Symbolsへの移行も検討できます。

両方のアイコンセットを併用することも技術的には可能ですが、異なるフォントファイルを読み込むことになるため、ファイルサイズが増加する可能性があります。また、スタイルの違いが混在するとデザインの一貫性が損なわれる可能性もあります。可能な限り、どちらか一方に統一するのが望ましいでしょう。

6. 実践的な使用例

これまでに解説した導入方法と使い方を踏まえて、実際のWebページでMDIアイコンを使用する具体的な例をいくつか見てみましょう。

前提として、HTMLファイルの<head>にCDNでMDIのCSSを読み込んでいるとします。

“`html

MDI Usage Examples


“`

6.1. ナビゲーションメニューでの使用例

リストアイテムの先頭にアイコンを付けて、ナビゲーション項目の意味を分かりやすくします。

“`html

Navigation

“`

6.2. ボタンでの使用例

アイコンとテキストを組み合わせたボタンや、アイコンのみのボタンを作成します。

“`html

Buttons


“`

6.3. フォーム入力フィールドでの使用例

入力フィールドのプレースホルダーとして、または補助的な情報としてアイコンを表示します。

“`html

Form Elements



“`
（注意: 上記のスタイルはインラインでシンプルに書いていますが、実際にはCSSクラスで管理するのが望ましいです。）

6.4. リストアイテムでの使用例

項目リストで、項目の種類や状態を示すためにアイコンを使用します。

“`html

List Items

  • タスク完了
  • エラー発生
  • 処理中

“`

6.5. ローディング表示での使用例

データ読み込み中など、待機状態を示すアイコンとしてアニメーションアイコンを使用します。

“`html

Loading Indicator

データを読み込み中…

“`

これらの例のように、MDIアイコンは様々なUIコンポーネントに組み込んで、ユーザーにとってより分かりやすく、魅力的なインターフェースを作成するのに役立ちます。CSSを適切に使うことで、サイズ、色、位置、アニメーションなどを自由に制御できます。

7. 高度なトピック

MDIをより効率的に、あるいは特定の要件に合わせて利用するための高度なトピックにも触れておきます。

7.1. SVGスプライトやバンドルツールの利用

大量のアイコンを使用する場合や、パフォーマンスを最適化したい場合、WebフォントではなくSVG形式でアイコンを扱う方が有利なことがあります。

  • SVGスプライト: 複数のSVGアイコンを一つのファイルにまとめ、CSSやJavaScriptから必要なアイコンを参照して表示する手法です。これにより、HTTPリクエスト数を減らし、キャッシュ効率を高めることができます。MDIの公式サイトから全アイコンのSVGスプライトが提供されているわけではないため、自分でビルドツールを使って生成するか、必要なアイコンだけを集めてスプライト化する必要があります。
  • バンドルツールとSVG: Webpack, Parcel, Viteなどのモダンなビルドツールを使用している場合、SVGファイルを直接JavaScriptモジュールとしてインポートしたり、ビルドプロセス中に最適化したりできます。@svgr/webpack のようなローダー/プラグインを使うと、SVGファイルをReactコンポーネントやVueコンポーネントに変換して取り込むことも可能です。
  • @mdi/js ライブラリ: このライブラリは、MDIのアイコンデータをJavaScriptオブジェクトとして提供します。これにより、SVGの <path> データを直接利用してアイコンを描画したり、特定のフレームワークのコンポーネントシステムに統合したりできます。これは、Webフォントの描画に起因する問題（例: ブロック化、テキストのちらつき）を避けたい場合や、より柔軟なアイコン操作が必要な場合に適しています。

これらの高度な手法は、プロジェクトの規模やパフォーマンス要件に応じて検討する価値があります。ただし、導入の複雑さはWebフォントよりも高くなります。

7.2. Webコンポーネントやフレームワークでの統合

Vue.js、React、Angularなどのフレームワークや、Vuetify、Material UIなどのUIライブラリは、独自のアイコンシステムを持っていることがよくあります。MDIをこれらのシステムと統合することで、よりシームレスにアイコンを扱えるようになります。

例えば、Vuetifyでは $mdi シンタックスを使ってアイコンを指定でき、これは内部的にMDIのWebフォントを参照しています。<v-icon>$mdi-home</v-icon> のように書くことで、Vuetifyのテーマ設定に基づいてアイコンの色やサイズが自動的に調整されたりします。

カスタムアイコンセットを定義できるUIライブラリでは、MDIをカスタムセットとして追加し、ライブラリの標準アイコンと同様の方法でMDIアイコンを参照できるように設定することも可能です。

7.3. カスタムアイコンセットの作成とMDIとの併用

MDIには含まれていない、特定のプロジェクトに固有のカスタムアイコンが必要になる場合があります。そのような場合、カスタムアイコンを別途用意し、MDIと組み合わせて使用することができます。

  • カスタムアイコンフォント: IcoMoonやFontelloといったツールを使うと、独自のSVGアイコンをアップロードしてカスタムアイコンフォントを作成できます。作成したカスタムフォントをMDIと一緒に読み込み、異なるCSSクラス名 (icon icon-<custom-name>) で使い分けることになります。ただし、フォントファイルが複数になるため、読み込みパフォーマンスに影響を与える可能性があります。
  • カスタムSVGアイコン: カスタムアイコンを個別のSVGファイルとして管理し、必要な場所でインラインSVGや <img> タグ、あるいはビルドツールを通じてコンポーネントとして埋め込む方法です。この方法であれば、MDIはWebフォントとして読み込みつつ、カスタムアイコンはSVGとして独立して管理できます。

MDIの膨大なアイコンとカスタムアイコンを組み合わせることで、汎用的な機能はMDIでカバーしつつ、固有のブランディングや機能を表すアイコンはカスタムで用意するという柔軟なアプローチが可能です。

8. トラブルシューティング

MDIを使用している際に発生しうる一般的な問題と、その解決策をいくつか紹介します。

8.1. アイコンが表示されない

最もよくある問題です。以下の点を確認してください。

  • MDIのCSSファイルが正しく読み込まれているか:
    • CDNを利用している場合: <link> タグがHTMLの<head>内にあり、href のURLが正しいか、スペルミスがないか確認します。ブラウザの開発者ツール（F12キーなどで開ける）のNetworkタブで、CSSファイルが正常にダウンロードされているか確認してください。HTTPエラー（404 Not Foundなど）が出ていないか確認します。
    • セルフホスティングの場合: @import パスが正しいか (~ の有無、ディレクトリ構造) 確認します。ビルドツールを使っている場合は、ビルドが正常に完了しているか、生成されたCSSファイルにMDIのスタイルが含まれているか確認します。静的にファイルを配置している場合は、HTMLからのCSSファイルのパス、およびCSSファイルからのフォントファイルの相対パスが正しいか確認します。ブラウザの開発者ツールのNetworkタブで、CSSファイルとフォントファイル（WOFF2, WOFF, TTFなど）が正常にダウンロードされているか確認してください。フォントファイルが404になっていることが多いです。
  • HTML要素に正しいクラス名が付与されているか:
    • ベースクラス mdi が付いているか確認します。
    • アイコン指定クラス mdi-<icon-name> のアイコン名部分が正確か確認します。公式サイトで名前をコピー＆ペーストするのが確実です。スペルミス (md-home と mdi-home の間違いなど) に注意してください。
  • CSSで display プロパティなどによって要素が非表示になっていないか: 開発者ツールで要素を選択し、Stylesタブで適用されているCSSを確認します。display: none; や visibility: hidden;、あるいは width: 0; height: 0; などが適用されていないか確認します。
  • フォントのロードに時間がかかっている: 特にWebフォントはダウンロードに時間がかかる場合があります。ページの読み込み完了を待ってみるか、Networkタブでフォントファイルのダウンロード状況を確認します。@font-face に font-display: swap; などを指定して、フォントがロードされるまで代替表示を行う設定も有効です。
  • CSSの競合: 他のCSSルールによって、MDIのスタイルが上書きされていないか確認します。開発者ツールで要素に適用されているスタイルを確認し、MDIのフォントファミリーや:before / :after 疑似要素の content プロパティが意図通りになっているかチェックします。

8.2. アイコンのサイズや色が適用されない

  • CSSの適用順序と詳細度: 定義したCSSルールが、MDIのデフォルトスタイルや他のスタイルよりも優先されているか確認します。開発者ツールのStylesタブで、適用されているCSSルールの詳細度（Specificity）を確認します。より詳細度が高いルールで上書きされている可能性があります。
  • セレクタの誤り: CSSで指定したセレクタ (.large-icon, .red-icon など) が、HTML要素に付与したクラス名と一致しているか確認します。
  • インラインスタイルの優先度: HTML要素に style="..." でインラインスタイルを指定している場合、CSSファイルよりも優先されます。CSSファイルでスタイルを定義しているのに適用されない場合は、インラインスタイルで上書きされていないか確認します。

8.3. 異なるブラウザでの表示崩れ

  • ブラウザの互換性: MDIは主要なモダンブラウザで広くサポートされていますが、非常に古いブラウザではWebフォントや特定のCSSプロパティがサポートされていない可能性があります。使用しているMDIのバージョンと対象ブラウザの互換性を確認します。
  • フォント形式: MDIパッケージにはWOFF2, WOFF, TTFなど複数のフォント形式が含まれています。MDIのCSSはこれらの形式を @font-face ルールで @src に列挙しており、ブラウザがサポートする最適な形式を自動的に選択するようになっています。通常はこの設定で問題ありませんが、特定の環境で問題が発生する場合は、提供されているフォント形式が対象ブラウザでサポートされているか確認します。
  • レンダリングの違い: ブラウザによっては、フォントのレンダリング方法にわずかな違いがある場合があります。これは完全に回避するのが難しい場合もありますが、ClearType設定（Windows）やフォントスムージングのCSSプロパティ（text-rendering, -webkit-font-smoothing, -moz-osx-font-smoothing など）で調整できる場合があります。

8.4. パフォーマンスに関する問題

  • フォントファイルのサイズ: MDIのWebフォントファイルは多くのアイコンが含まれているため、ある程度のサイズがあります。特に初回アクセス時はダウンロードに時間がかかる可能性があります。WOFF2形式は最も効率的な形式であり、優先的に読み込まれるようにCSSが記述されています。CDNを利用する場合は、ユーザーが既にキャッシュを持っている可能性があるため有利です。セルフホスティングの場合は、サーバーが圧縮（gzip, brotli）に対応しているか確認します。
  • 必要なアイコンだけを使用: プロジェクトで使うアイコンがMDIのごく一部である場合、全てのフォントファイルを読み込むのは非効率です。必要なアイコンだけを抽出してカスタムフォントを生成する（ただし手間がかかる）か、SVG形式で必要なアイコンだけを管理するといった代替手段を検討できます。しかし、MDIの利便性（簡単に追加・変更できる）を考慮すると、多くの場合はWebフォントとして全てを読み込む方法が採用されます。

9. まとめ

Material Design Icons (MDI) は、その膨大なアイコン数、Material Designに準拠したスタイル、そして利用形式の多様性から、現代のWeb開発やUIデザインにおいて非常に強力なツールとなります。

この記事では、MDIの基本的な概念から、CDNまたはセルフホスティングによる導入方法、CSSクラスを使ったサイズ・色・回転・アニメーションといった基本的な使い方、アクセシビリティへの配慮、そして公式サイトを使ったアイコンの効率的な探し方までを詳細に解説しました。さらに、Google公式のMaterial Symbolsとの違いや、SVG利用、フレームワーク連携といった高度なトピック、そしてよくあるトラブルシューティングについても触れました。

MDIを使いこなすことで、あなたのプロダクトに視覚的に魅力的で、直感的で、アクセシブルなアイコンを容易に組み込むことができます。約8000種類ものアイコンの中から、あなたのプロジェクトにぴったりのアイコンがきっと見つかるはずです。

アイコンは、ユーザーインターフェースの「言葉」のようなものです。MDIという豊富な「語彙」を持つライブラリを効果的に活用して、ユーザーにとって分かりやすく、使いやすいUI/UXを実現しましょう。公式サイトで様々なアイコンを探索し、実際にコードを書いて試してみることから始めてみてください。MDIはあなたのデザインと開発プロセスを強力にサポートしてくれるはずです。

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

上部へスクロール