LANG SELRCT

コードを書く場所についてはこちら

2017年11月18日土曜日

Material iconsでアイコンを表示する

GoogleのMaterial iconsを利用する方法を調べた時に書いたコードです


例ではrefreshアイコン(右回転の矢印)を表示しました
その他のアイコンはこちら→https://material.io/icons/


refreshアイコンの場合




利用方法
  1. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    をhead内に書く
  2. <i class="material-icons">refresh</i>
    のように利用したいアイコン名をiタグで囲む
※左隣の more vert のようにスペースで区切られている場合は
アンダーバーでつなげて more_vert とすると表示できました



コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}
意訳.gs
この機能は以下を実行する
指定したファイルのHTMLを表示する

index.html
<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <i class="material-icons">refresh</i>
</body>
</html>
意訳.gs
これはHTML5文書です


Material Iconsを利用できるようにする


表示したいアイコンを指定する(ここではrefreshアイコン)





おまけ


アイコンのスタイルを変える


styleタグを追加して
.material_icon というclass名を作って上の画像の様な見た目にするindex.htmの例です
マウスが重なった時に色をsilverにもしています


index.html
<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<style>
  .material_icon {
    width: 25px;
    font-size: 25px;
    color: gray;
    background-color: transparent;
    border: solid 2px lightgray;
    vertical-align: middle;
  }
  i:hover {
    color: silver;
  }
</style>
<body>
  <label id="refresh"><i class="material-icons material_icon">refresh</i></label>
</body>
</html>


参考

Material icons
https://material.io/icons/

Material Icons Guide
https://google.github.io/material-design-icons/