例ではrefreshアイコン(右回転の矢印)を表示しました
refreshアイコンの場合
利用方法
- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
をhead内に書く - <i class="material-icons">refresh</i>
のように利用したいアイコン名をiタグで囲む
アンダーバーでつなげて 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/