Google Apps Script試行錯誤 Blog: Material iconsでアイコンを表示する

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

例ではrefreshアイコン（右回転の矢印）を表示しました

その他のアイコンはこちら→https://material.io/icons/

refreshアイコンの場合

利用方法

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
をhead内に書く
<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/

2017年11月18日土曜日

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

おまけ