KumaTechLab
2020-10-09

Material Design Iconの使い方

Material Design Iconの使い方

Material Design Iconの使い方についてご紹介します。

似たようなものに「Font Awesome」があります。基本的には似たような使用方法です。

ライセンスも含めてみてみましょう。

こんなアイコンが使えます。

色ももちろん変更できます。

Material Design Icon の使い方

Material Design Icon を

「ライセンス」

「動作環境」

「使用方法」

の順で見ていきましょう。

「Font Awesome」は使用したことのある人が多いと思いますので、「Font Awesome」での該当部分も載せておきます。

ライセンス

Material Design Icon は「Apache License 2.0」です。

そのため、

  • 使用
  • 商用
  • 公開
  • 複製

といった項目を自由に行うことができます。

「無料で使い方を気にせずに利用できる」ということです。

どうしても気になる方は調べたり、上記リンクのライセンスページから読み取ってください。

ちなみに「Font Awasome」のライセンス(無料版)は

Icons・・・ CC BY 4.0 License

Fonts・・・ SIL OFL 1.1 License

Code・・・ MIT License

となっています。

IconsはSVGやjsの利用に伴うライセンスです。

FontsはWebで使用されている(基本的な使用はこれ)フォントファイルに適用されるライセンスです。

SIL OFL ライセンスは商用利用や同梱可能なライセンスです。

Codeは実際に記述したコードに当たる部分に適用されるライセンスです。

MIT Lisenceは商用利用可能、同梱も可能となっています。ライセンスの表記とMIT Lisence全文の表記をライセンスファイル等に記述が必要です。

「Font Awesome」を利用したことのある人は同じように使用することができるという認識で問題ないと思います。

動作環境

Material Design Icon　は合字によって表示されています。

そのため合字をサポートしているブラウザのバージョンを利用していれば問題なく表示されるはずです。

公式ページに記載されている合字をサポートしている各種ブラウザのバージョンは以下の表になります。(2020/10/09 時点)

Font Awesomeでは同様の記述について見つけられませんでした。

現在使われている環境ではほとんど動作していると思います。

使用方法

Materila Design Icon はグーグルフォントを介して使用できます。

<head></head>内に以下を追記します。

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

ローカルからの仕様も可能です。

その場合あらかじめフォントファイルを公式よりダウンロードしておきましょう。

次に、マークアップです。

<i class="materilal-icons">face</i>

faceの部分にはアイコン名が入ります。アイコン名はアイコン一覧より確認してください。

また、グーグルフォントを介して使用している場合には「material-icons」クラスにはデフォルトのスタイリングがされています。

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;


  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;


  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;


  /* Support for IE. */
  font-feature-settings: 'liga';
}

<i>タグに独自のクラスを付与することで大きさを変えたり色を変更することができます。

<i class="materilal-icons md-18 md-yellow">face</i>
<style>
 .md-18 { font-size: 18px; }
 .md-yellow { color: yellow; }
</style>

Font Awesome　の場合は以下のような形でした。

ほとんど同様なことがわかるかと思います。

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<i class="fab fa-twitter"></i>

まとめ

Material Design Iconについてライセンスや使用方法について理解できたのではないかと思います。

Iconの種類が豊富で結構使いやすいものが多い印象です。

Font Awesomeだと使いたかったアイコンがPRO用のものだったりしたことが多かったです。

その点Material Design Iconはあれば無料なのでありがたいです。

アイコン一覧

使用方法(英語)

2020 KumaTechLab.