無料で使えるMaterial Iconsの特徴とアイコンの表示方法と使い方

Googleアイコン

アイコンに、画像ではなくアイコンフォントを使用して文字として扱うことで、ページの表示速度も速くなり、アイコンの色やサイズの変更がCSSで簡単に変更することができます。

そんなアイコンフォントには、FontAwesomeが多く使われていますが、GoogleのMaterial Iconsもオススメです。

この記事では、そんなMaterial Iconsについて、

  • Material Iconsとは?
  • Material Iconsの良いところ。
  • Material Iconsの表示方法と使い方。

の内容です。

困った人
困った人

FontAwesomeより、もっとシンプルな無料アイコンってない???

こんなお悩みの方へ、Material Iconsについて解説していきますので、是非最後までご覧いただけると嬉しいです。

Material Iconsとは?

Material Iconsは、Googleが作ったWebアイコンフォントです。

Webアイコンフォントは、Webサイトはもちろんのこと、PDFなどのドキュメントファイルにも埋め込むことが可能です。

Material Icons

Webアイコンフォントで有名なものにFontAwesomeがあります。

Material Iconsは、それと同じく商用&無料利用が可能で、画像ではなく文字なので、大きさや色をCSSで変更したりすることが簡単にできるのが特徴です。

かかかず
かかかず

個人的には、FontAwesomeよりもシンプルなデザインなので、使い分けしています。

外部リンク Google Material Icons

Material IconsをFontAwesomeと比較で見た時の違い

どっち

前述もしましたが、Webアイコンフォントで有名なFontAwesomeとMaterial Iconsの違いについて解説していきます。

Material Iconsの良い点

制限なしに無料で使える

Material Iconsは、約1800種類のアイコンを制限なく無料で使うことができます。

一方、Font Awesomeは無料・有料のプランがあり、無料プランでも使えるアイコンが豊富ですが有料でしか利用できないアイコンがあります。

スタイルが選べる

Material Iconsは、同じアイコンでも5種類のスタイル・見た目から選んで使うことができます。

一方、FontAwesomeでは有料プランにすることでLightやDuotoneなど、線の太さも選ぶことができます。

例えば、HOMEアイコンを例に見てみましょう。

Material Icons

  • home
  • home
  • home
  • home
  • home

FontAwesome

Material Iconsは左から順にfilled・round・sharp・outline・twotoneの5種類です。一方、FontAwesomeは無料版で利用できるのは1種類です。

このように、無料ながらも選べる種類が多いのはMaterial Iconsの特徴であると言えます。

svgだけじゃなくpngファイルもダウンロードできる

画像でアイコンを使う際、Material Iconsはsvgとpngのファイルがダウンロードできます。

ファイルのダウンロード

FontAwesomeは、svgファイルのみなのでpngファイルで使いたい場合は助かります。

Material Icons5種類のスタイルサンプル

Material Iconsで選べる5種類のスタイル別のサンプルを見ていきましょう。サンプルのアイコンは全て、HOME・Search・DONE・Check・Listでそれぞれスタイル別に表示しています。

Filled

Material Iconsの標準的なフォントスタイルです。

  • home

    Home

  • search

    Search

  • done

    Done

  • check_circle

    Check

  • list

    List

Round

縁を少し丸めたRoundです。丸ゴ系のフォントに合うアイコンのスタイルです。

  • home

    Home

  • search

    Search

  • done

    Done

  • check_circle

    Check

  • list

    List

Sharp

標準的なfilledを、少しシャープに細くしたスタイルです。

  • home

    Home

  • search

    Search

  • done

    Done

  • check_circle

    Check

  • list

    List

このスタイルは、Filledのスタイルと同じのものがほとんどで、上記のサンプル5種もfilledとSharpは同じものになっています。

なので、違いが分かるようattachmentを一例として見てみます。

Filled

attachment

Sharp

attachment

このようにSharpにすることで、全体的に細い線でシャープな印象になるスタイルです。

Outlined

輪郭を出すOutlinedのスタイルです。

  • home

    Home

  • search

    Search

  • done

    Done

  • check_circle

    Check

  • list

    List

TwoTone

最後に、2色TwoToneのスタイルです。

  • home

    Home

  • search

    Search

  • done

    Done

  • check_circle

    Check

  • list

    List

このスタイルのみ、CSSのcolor プロパティで色変更ができないので、filter プロパティで色を変更します。

そのまま

check_circle

filter適用

check_circle

例えば、上記で右のアイコンは、filter: invert(8%) sepia(94%) saturate(4590%) hue-rotate(358deg) brightness(201%) contrast(112%);filter プロパティをかけて赤くしたサンプルです。

Web用Google Material Iconsの使い方と手順

手順と方法

Web用Google Material Iconsの使い方と手順について、解説していきます。

かかかず
かかかず

そんなにたくさんの作業は必要なく、2つのステップで完了です。

順に見ていきましょう。

HTMLにMaterial IconsのCSSを記述

スタンダードのfilledを使う場合

HTML

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

全種類のスタイルを使う場合

全種類のGoogle Material Iconsを使う場合は、以下を記述します。

HTML

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

設置したい場所にHTMLかCSSで記述

HTMLの場合

HTMLで利用する場合は、使いたいアイコンを選択して右側に表示されるHTMLタグをコピペすればOKです。

HTMLの場合

例えば、「done」アイコンを使う場合は、右側に表示された「Icon font」のspan タグを記述します。

HTML

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

CSSの場合

CSSの場合は、使いたいアイコンを選択して右側に表示された「Code Point」の4桁のunicodeを使います。

CSSの場合

このアイコンを、beforeの擬似要素で表示させる場合、HTMLとCSSは以下のように記述すればOKです。

HTML

<p class="faceicon">ここにテキスト</p>

CSS


p.faceicon:before {
    content: "\E87C";
    font-family: 'Material Icons';
}

ここにテキスト

かかかず
かかかず

unicodeの前に「バックスラッシュ\」を入れる必要があるので忘れずに記述しましょう。

さいごに

Material Iconsは、無料で様々なアイコンを表示させることができ、アイコンの大きさや色を変更したり、回転させたりすることが簡単にできます。

有料版を含めると、アイコンの種類やデザインパターンは8,000種類と、FontAwesomeの方が多いですが、Material Iconsはシンプルな造りで用途を問わず使えるアイコンデザインです。

かかかず
かかかず

この機会にぜひ、Material Iconsを使ってみてください。

外部リンク Google Material Icons

参考サイト

参考Google FontsGoogle Fonts
カテゴリーのイラスト

同じカテゴリの記事一覧

ボタンの影