例では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/
