heimdalの技術ノート

IT全般、Linux、Windows、プログラミング開発など、何でもござれ

Material Iconsをwebサイト経由せず、ローカルで使えるようにする

f:id:xheimdal:20170228235921p:plain

はじめに

最近、Googleが提唱しているMaterial Designが気になりはじめた。
その中でデザインにあったmaterial iconがあるのでそれを使う方法を紹介する。

公式サイト

Material Icons Guide - Google Design

このサイトで紹介されている方法では、

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

をhtmlファイルに貼り付ければ、使用できるとあるが、外部接続して欲しくない場合もある。
その場合の手順を紹介する。

準備

下のURLにアクセスし、最新版をダウンロードする。
記事を書いている時は、v3.0.1。

Releases · google/material-design-icons · GitHub

60MBの容量があるが怯まず、zipを解凍する。

中身に色々あるが、実は使うのは、iconfontのフォルダのみ!!!!
そのフォルダを使用したいhtmlファイルのフォルダに格納して使う。

そのフォルダの中にあるcssを参照すれば使える。

実際に簡単なindex.htmlを用意してみた。
ソースコードは、index.htmlファイルと同じ階層にiconfontが入っている前提。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/material-icons.css">
</head>
<body>
    <i class="material-icons">search</i>
    <i class="material-icons">android</i>
    <i class="material-icons">mail</i>
    <i class="material-icons">reply</i></body>
</html>

こんな感じで表示できれば成功!!!!
f:id:xheimdal:20170301003606p:plain

アイコンの使い方は、 のサイトを開き、下にスクロール、またはsearchに文字を入力すると、アイコンの一覧が表示されるので、好きなアイコンを選択して、画面下の「ICON FONT」をクリックすると、htmlに貼るソースが表示される。

こんな感じ。 f:id:xheimdal:20170301004537p:plain

あとはお好きなように貼り付ければOK

最後に

商用利用も可能で、web制作時、アイコンに困ったら、選択肢の一つになると思う。 無料というのも強い。 好みはあるが、私はdesignも好きなので今後も積極的に使っていくと思う。

その他

material iconを使っていくと、Google謹製のCSSフレームワーク material design lite(MDL)も気になってきた。
今後MDLにも触れていこうと思う。