Style Decoration Icons | Features | SpreadJS JavaScript Demos

The icons are used for decorating the cell by the GC.Spread.Sheets.Style. So it could specify the src, width, height and position for the icon options in the decoration option of the GC.Spread.Sheets.Style. In addition, the cell alignment could affect the alignment of the icons in the vertical direction. The definitions: The description of GC.Spread.Sheets.IIcon: Name Type Default Value Description src string the icon path, required, could be url or base64 width number 12 the painted width, optional height number 12 the painted height, optional position GC.Spread.Sheets.IconPosition GC.Spread.Sheets.IconPosition.left the painted position, optional The description of GC.Spread.Sheets.IconPosition: Name Description left on the left side in the cell right on the right side in the cell leftOfText on the left side of the text rightOfText on the right side of the text outsideLeft on the outside left of the cell outsideRight on the outside right of the cell For example:

var spreadNS = GC.Spread.Sheets;
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
initSpread(spread);
};
function initSpread(spread) {
var sheet = spread.getSheet(0);
sheet.suspendPaint();
setLayout(sheet);
var style;
function setIcon (row, col, style) {
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
sheet.setStyle(row, col, style);
sheet.setText(row, col, 'Cell Text');
sheet.getRange(row, col, 1, 1)
.setBorder(new GC.Spread.Sheets.LineBorder("green", GC.Spread.Sheets.LineStyle.dashed)
, { outline: true });
};
//left side in the cell
style = new GC.Spread.Sheets.Style();
style.decoration = {
icons: [
{
src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSJ0cmFuc3BhcmVudCIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcgOUg1TDUgNS45NjA0NmUtMDhIN0w3IDlaTTYgMTBDNi41NTIyOCAxMCA3IDEwLjQ0NzcgNyAxMUM3IDExLjU1MjMgNi41NTIyOCAxMiA2IDEyQzUuNDQ3NzIgMTIgNSAxMS41NTIzIDUgMTFDNSAxMC40NDc3IDUuNDQ3NzIgMTAgNiAxMFoiIGZpbGw9IiNFNjUyNDkiLz4KPC9zdmc+Cg==',
position: GC.Spread.Sheets.IconPosition.left
}
]
};
setIcon(1, 1, style);
//left side of the text
style = new GC.Spread.Sheets.Style();
style.decoration = {
icons: [
{
src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABPklEQVR4Ae2YAWYDQRSGV6BUabFQiKE28wA9Qo7Qo/QIBRTQGyQESlUWURRSVdZssL3B5gZJT/A6A8Eq8qck//I+foDxvjWzfi8zuhiGYRg6yZxOs3lMG6N7ZsI0/AYYnEoiCZT44EQSwNfnlEgDkKSNmacrDQuQZQNIUApoepeQAGHavguoCewyG6i+5apfN6q1HDm+0ZWM/yewHKbDTpswujtM4PUiHUAgIO1hAu/XHAIpjThc4NP1XKAWmuBX6PmMSeADFygviQT8Ey6wyHkEVv4eF1gOiQRkjAtUBY9A464wgdmAZ/gga7xKvJzT/4F20D/gIA+IAEGFAIpcgr5C1MUtLsBcIbpQV4jgv/fZzG15K4RM8dXiIud/wB0BF7OlqxDBl9CGOqaMWZ+8QlTFj1ajx7/qg2EYhmH8AtrSH2QJmV2LAAAAAElFTkSuQmCC',
position: GC.Spread.Sheets.IconPosition.leftOfText
}
]
};
setIcon(4, 1, style);
//outside left of the cell
style = new GC.Spread.Sheets.Style();
style.decoration = {
icons: [
{
src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSIwIDAgMTIgMTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1ICg3ODA3NikgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+dW5kbzwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJ1bmRvIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNNi43NDY0OTIwNSwzLjc5NjM1NTEyIEM4LjUzNjk1MDQyLDMuNzk2MzU1MTIgMTAsNS4xNzQ5NDI4NyAxMCw2Ljg5NzczMTcxIEMxMCw4LjYyMDUyMDU0IDguNTM2OTUwNDIsMTAgNi43NDY0OTIwNSwxMCBMNS4zMzQ4OTI0MiwxMCBDNS4xOTczODA3MywxMCA1LjExMTMxODk5LDkuOTAxOTExNjEgNS4xMTEzMTg5OSw5Ljc2OTkzODE0IEw1LjExMTMxODk5LDkuMjQ0NzE5MzkgQzUuMTExMzE4OTksOS4xMTM2Mzc2MyA1LjIxNDIxODksOC45OTg2MDY3IDUuMzUyNjY2MDQsOC45OTg2MDY3IEw2Ljc0NzQyNzUsOC45OTg2MDY3IEM3Ljk3MDA2NTQ4LDguOTk4NjA2NyA4Ljk1MTM1NjQxLDguMDYzMjAwMTMgOC45NTEzNTY0MSw2Ljg5NzczMTcxIEM4Ljk1MTM1NjQxLDUuNzMyMjYzMjggNy45NjkxMzAwMyw0Ljc5Nzc0ODQzIDYuNzQ2NDkyMDUsNC43OTc3NDg0MyBMNC4zNTM2MDE1LDQuNzk3NzQ4NDMgQzQuMzUzNjAxNSw0Ljc5Nzc0ODQzIDQuMjE2MDg5OCw0Ljc5Nzc0ODQzIDQuMTY0NjM5ODUsNC44MTM3OTkyNSBDNC4wMjcxMjgxNiw0Ljg3OTc4NTk5IDQuMDYxNzM5OTQsNC45Nzc4NzQzOCA0LjE4MTQ3ODAyLDUuMDkyOTA1MzEgTDUuMDI1MjU3MjUsNS44OTcyMzAxMiBDNS4xMjgxNTcxNiw1Ljk5NTMxODUxIDUuMTExMzE4OTksNi4xNDMzNDI4MSA1LjAwODQxOTA4LDYuMjQxNDMxMiBMNC42Mjk1NjAzNCw2LjYwMjU3NDgyIEM0LjUyNjY2MDQzLDYuNzAwNjYzMjEgNC40MDU5ODY5LDYuNzAwNjYzMjEgNC4zMDIxNTE1NCw2LjYxODYyNTY1IEwyLjA2NDU0NjMsNC40ODU2NDkgQzEuOTc4NDg0NTcsNC40MDM2MTE0NCAxLjk3ODQ4NDU3LDQuMjcyNTI5NjggMi4wNjQ1NDYzLDQuMTkwNDkyMTEgTDQuMjg1MzEzMzgsMi4wNzM1NjYyOSBDNC4zODgyMTMyOCwxLjk3NTQ3NzkgNC41NjAzMzY3NiwxLjk3NTQ3NzkgNC42NDYzOTg1LDIuMDczNTY2MjkgTDUuMDA3NDgzNjMsMi40MTc3NjczNyBDNS4xMTAzODM1NCwyLjUxNTg1NTc3IDUuMTEwMzgzNTQsMi42Nzk5MzA4OSA1LjAwNzQ4MzYzLDIuNzYxOTY4NDYgTDQuMTYzNzA0NCwzLjU2NjI5MzI2IEM0LjA2MDgwNDQ5LDMuNjY0MzgxNjUgNC4wNjA4MDQ0OSwzLjc3OTQxMjU4IDQuMjMyOTI3OTcsMy43Nzk0MTI1OCBMNC4zNTM2MDE1LDMuNzc5NDEyNTggTDYuNzQ2NDkyMDUsMy43OTYzNTUxMiBaIiBmaWxsPSIjNkU2RTZFIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgIDwvZz4KPC9zdmc+',
position: GC.Spread.Sheets.IconPosition.outsideLeft
}
]
};
setIcon(7, 1, style);
//multiple icons
style = new GC.Spread.Sheets.Style();
style.decoration = {
icons: [
{
src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSIwIDAgMTIgMTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1ICg3ODA3NikgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+dW5kbzwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJ1bmRvIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNNi43NDY0OTIwNSwzLjc5NjM1NTEyIEM4LjUzNjk1MDQyLDMuNzk2MzU1MTIgMTAsNS4xNzQ5NDI4NyAxMCw2Ljg5NzczMTcxIEMxMCw4LjYyMDUyMDU0IDguNTM2OTUwNDIsMTAgNi43NDY0OTIwNSwxMCBMNS4zMzQ4OTI0MiwxMCBDNS4xOTczODA3MywxMCA1LjExMTMxODk5LDkuOTAxOTExNjEgNS4xMTEzMTg5OSw5Ljc2OTkzODE0IEw1LjExMTMxODk5LDkuMjQ0NzE5MzkgQzUuMTExMzE4OTksOS4xMTM2Mzc2MyA1LjIxNDIxODksOC45OTg2MDY3IDUuMzUyNjY2MDQsOC45OTg2MDY3IEw2Ljc0NzQyNzUsOC45OTg2MDY3IEM3Ljk3MDA2NTQ4LDguOTk4NjA2NyA4Ljk1MTM1NjQxLDguMDYzMjAwMTMgOC45NTEzNTY0MSw2Ljg5NzczMTcxIEM4Ljk1MTM1NjQxLDUuNzMyMjYzMjggNy45NjkxMzAwMyw0Ljc5Nzc0ODQzIDYuNzQ2NDkyMDUsNC43OTc3NDg0MyBMNC4zNTM2MDE1LDQuNzk3NzQ4NDMgQzQuMzUzNjAxNSw0Ljc5Nzc0ODQzIDQuMjE2MDg5OCw0Ljc5Nzc0ODQzIDQuMTY0NjM5ODUsNC44MTM3OTkyNSBDNC4wMjcxMjgxNiw0Ljg3OTc4NTk5IDQuMDYxNzM5OTQsNC45Nzc4NzQzOCA0LjE4MTQ3ODAyLDUuMDkyOTA1MzEgTDUuMDI1MjU3MjUsNS44OTcyMzAxMiBDNS4xMjgxNTcxNiw1Ljk5NTMxODUxIDUuMTExMzE4OTksNi4xNDMzNDI4MSA1LjAwODQxOTA4LDYuMjQxNDMxMiBMNC42Mjk1NjAzNCw2LjYwMjU3NDgyIEM0LjUyNjY2MDQzLDYuNzAwNjYzMjEgNC40MDU5ODY5LDYuNzAwNjYzMjEgNC4zMDIxNTE1NCw2LjYxODYyNTY1IEwyLjA2NDU0NjMsNC40ODU2NDkgQzEuOTc4NDg0NTcsNC40MDM2MTE0NCAxLjk3ODQ4NDU3LDQuMjcyNTI5NjggMi4wNjQ1NDYzLDQuMTkwNDkyMTEgTDQuMjg1MzEzMzgsMi4wNzM1NjYyOSBDNC4zODgyMTMyOCwxLjk3NTQ3NzkgNC41NjAzMzY3NiwxLjk3NTQ3NzkgNC42NDYzOTg1LDIuMDczNTY2MjkgTDUuMDA3NDgzNjMsMi40MTc3NjczNyBDNS4xMTAzODM1NCwyLjUxNTg1NTc3IDUuMTEwMzgzNTQsMi42Nzk5MzA4OSA1LjAwNzQ4MzYzLDIuNzYxOTY4NDYgTDQuMTYzNzA0NCwzLjU2NjI5MzI2IEM0LjA2MDgwNDQ5LDMuNjY0MzgxNjUgNC4wNjA4MDQ0OSwzLjc3OTQxMjU4IDQuMjMyOTI3OTcsMy43Nzk0MTI1OCBMNC4zNTM2MDE1LDMuNzc5NDEyNTggTDYuNzQ2NDkyMDUsMy43OTYzNTUxMiBaIiBmaWxsPSIjNkU2RTZFIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgIDwvZz4KPC9zdmc+',
position: GC.Spread.Sheets.IconPosition.outsideLeft
},
{
src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSJ0cmFuc3BhcmVudCIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcgOUg1TDUgNS45NjA0NmUtMDhIN0w3IDlaTTYgMTBDNi41NTIyOCAxMCA3IDEwLjQ0NzcgNyAxMUM3IDExLjU1MjMgNi41NTIyOCAxMiA2IDEyQzUuNDQ3NzIgMTIgNSAxMS41NTIzIDUgMTFDNSAxMC40NDc3IDUuNDQ3NzIgMTAgNiAxMFoiIGZpbGw9IiNFNjUyNDkiLz4KPC9zdmc+Cg==',
position: GC.Spread.Sheets.IconPosition.left
},
{
src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABPklEQVR4Ae2YAWYDQRSGV6BUabFQiKE28wA9Qo7Qo/QIBRTQGyQESlUWURRSVdZssL3B5gZJT/A6A8Eq8qck//I+foDxvjWzfi8zuhiGYRg6yZxOs3lMG6N7ZsI0/AYYnEoiCZT44EQSwNfnlEgDkKSNmacrDQuQZQNIUApoepeQAGHavguoCewyG6i+5apfN6q1HDm+0ZWM/yewHKbDTpswujtM4PUiHUAgIO1hAu/XHAIpjThc4NP1XKAWmuBX6PmMSeADFygviQT8Ey6wyHkEVv4eF1gOiQRkjAtUBY9A464wgdmAZ/gga7xKvJzT/4F20D/gIA+IAEGFAIpcgr5C1MUtLsBcIbpQV4jgv/fZzG15K4RM8dXiIud/wB0BF7OlqxDBl9CGOqaMWZ+8QlTFj1ajx7/qg2EYhmH8AtrSH2QJmV2LAAAAAElFTkSuQmCC',
position: GC.Spread.Sheets.IconPosition.leftOfText
},
{
src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSIwIDAgMTIgMTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1ICg3ODA3NikgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+ZWxsaXBzaXM8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iZWxsaXBzaXMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIGQ9Ik0yLDcgQzEuNDQ3NzE1MjUsNyAxLDYuNTUyMjg0NzUgMSw2IEMxLDUuNDQ3NzE1MjUgMS40NDc3MTUyNSw1IDIsNSBDMi41NTIyODQ3NSw1IDMsNS40NDc3MTUyNSAzLDYgQzMsNi41NTIyODQ3NSAyLjU1MjI4NDc1LDcgMiw3IFogTTYsNyBDNS40NDc3MTUyNSw3IDUsNi41NTIyODQ3NSA1LDYgQzUsNS40NDc3MTUyNSA1LjQ0NzcxNTI1LDUgNiw1IEM2LjU1MjI4NDc1LDUgNyw1LjQ0NzcxNTI1IDcsNiBDNyw2LjU1MjI4NDc1IDYuNTUyMjg0NzUsNyA2LDcgWiBNMTAsNyBDOS40NDc3MTUyNSw3IDksNi41NTIyODQ3NSA5LDYgQzksNS40NDc3MTUyNSA5LjQ0NzcxNTI1LDUgMTAsNSBDMTAuNTUyMjg0Nyw1IDExLDUuNDQ3NzE1MjUgMTEsNiBDMTEsNi41NTIyODQ3NSAxMC41NTIyODQ3LDcgMTAsNyBaIiBmaWxsPSIjNkU2RTZFIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==',
position: GC.Spread.Sheets.IconPosition.rightOfText
},
{
src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSIwIDAgMTIgMTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1ICg3ODA3NikgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+b2s8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0ib2siIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIGQ9Ik01LjY3NjUyMjQsMTAgQzUuNjc2NTIyNCwxMCA2LjkxNzAzMjUzLDcuMzM0ODI5MDcgOC40MTk2ODA3OSw1LjMyNjE2ODAyIEM5LjU4MDA5Mzk2LDMuNzc2MzU0NDYgMTEsMi43MTg3NTQxMSAxMSwyLjcxODc1NDExIEwxMC41MTYxMDg0LDIgQzEwLjUxNjEwODQsMiA4Ljk2NzEyNTYsMi43MDIwNjg3NSA3LjU3NzY3MjIzLDQuMDUwMzc0NDYgQzYuMTY4MzYwMTEsNS40MTcyOTA3NiA1LjM0NDg4MTIxLDYuOTQ2NTczNSA1LjM0NDg4MTIxLDYuOTQ2NTczNSBMMy4yOTc0Mzg1Niw1LjAxMTcxMzA5IEwyLDYuNDYwMTI1OTcgTDUuNjc2NTE5ODEsOS45OTk5ODc0NyBMNS42NzY1MTk4MSw5Ljk5OTk4NzQ3IEw1LjY3NjUyMjQsMTAgWiIgaWQ9Ik9LIiBmaWxsPSIjNkU2RTZFIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgIDwvZz4KPC9zdmc+',
position: GC.Spread.Sheets.IconPosition.right
},
{
src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSIwIDAgMTIgMTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1ICg3ODA3NikgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+Y2xlYXI8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iY2xlYXIiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwb2x5Z29uIGZpbGw9IiM2RTZFNkUiIGZpbGwtcnVsZT0ibm9uemVybyIgcG9pbnRzPSI4Ljg3NTQ2MzkgMyAxMCA0LjEyNDUzNjEgNy42MjQ1MzYxIDYuNSAxMCA4Ljg3NTQ2MzkgOC44NzU0NjM5IDEwIDYuNSA3LjYyNDUzNjEgNC4xMjQ1MzYxIDEwIDMgOC44NzU0NjM5IDUuMzc1NDYzOSA2LjUgMyA0LjEyNDUzNjEgNC4xMjQ1MzYxIDMgNi41IDUuMzc1NDYzOSI+PC9wb2x5Z29uPgogICAgPC9nPgo8L3N2Zz4=',
position: GC.Spread.Sheets.IconPosition.right
},
{
src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSIwIDAgMTIgMTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1ICg3ODA3NikgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+cmVkbzwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJyZWRvIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNNi43NDY0OTIwNSwzLjc5NjM1NTEyIEM4LjUzNjk1MDQyLDMuNzk2MzU1MTIgMTAsNS4xNzQ5NDI4NyAxMCw2Ljg5NzczMTcxIEMxMCw4LjYyMDUyMDU0IDguNTM2OTUwNDIsMTAgNi43NDY0OTIwNSwxMCBMNS4zMzQ4OTI0MiwxMCBDNS4xOTczODA3MywxMCA1LjExMTMxODk5LDkuOTAxOTExNjEgNS4xMTEzMTg5OSw5Ljc2OTkzODE0IEw1LjExMTMxODk5LDkuMjQ0NzE5MzkgQzUuMTExMzE4OTksOS4xMTM2Mzc2MyA1LjIxNDIxODksOC45OTg2MDY3IDUuMzUyNjY2MDQsOC45OTg2MDY3IEw2Ljc0NzQyNzUsOC45OTg2MDY3IEM3Ljk3MDA2NTQ4LDguOTk4NjA2NyA4Ljk1MTM1NjQxLDguMDYzMjAwMTMgOC45NTEzNTY0MSw2Ljg5NzczMTcxIEM4Ljk1MTM1NjQxLDUuNzMyMjYzMjggNy45NjkxMzAwMyw0Ljc5Nzc0ODQzIDYuNzQ2NDkyMDUsNC43OTc3NDg0MyBMNC4zNTM2MDE1LDQuNzk3NzQ4NDMgQzQuMzUzNjAxNSw0Ljc5Nzc0ODQzIDQuMjE2MDg5OCw0Ljc5Nzc0ODQzIDQuMTY0NjM5ODUsNC44MTM3OTkyNSBDNC4wMjcxMjgxNiw0Ljg3OTc4NTk5IDQuMDYxNzM5OTQsNC45Nzc4NzQzOCA0LjE4MTQ3ODAyLDUuMDkyOTA1MzEgTDUuMDI1MjU3MjUsNS44OTcyMzAxMiBDNS4xMjgxNTcxNiw1Ljk5NTMxODUxIDUuMTExMzE4OTksNi4xNDMzNDI4MSA1LjAwODQxOTA4LDYuMjQxNDMxMiBMNC42Mjk1NjAzNCw2LjYwMjU3NDgyIEM0LjUyNjY2MDQzLDYuNzAwNjYzMjEgNC40MDU5ODY5LDYuNzAwNjYzMjEgNC4zMDIxNTE1NCw2LjYxODYyNTY1IEwyLjA2NDU0NjMsNC40ODU2NDkgQzEuOTc4NDg0NTcsNC40MDM2MTE0NCAxLjk3ODQ4NDU3LDQuMjcyNTI5NjggMi4wNjQ1NDYzLDQuMTkwNDkyMTEgTDQuMjg1MzEzMzgsMi4wNzM1NjYyOSBDNC4zODgyMTMyOCwxLjk3NTQ3NzkgNC41NjAzMzY3NiwxLjk3NTQ3NzkgNC42NDYzOTg1LDIuMDczNTY2MjkgTDUuMDA3NDgzNjMsMi40MTc3NjczNyBDNS4xMTAzODM1NCwyLjUxNTg1NTc3IDUuMTEwMzgzNTQsMi42Nzk5MzA4OSA1LjAwNzQ4MzYzLDIuNzYxOTY4NDYgTDQuMTYzNzA0NCwzLjU2NjI5MzI2IEM0LjA2MDgwNDQ5LDMuNjY0MzgxNjUgNC4wNjA4MDQ0OSwzLjc3OTQxMjU4IDQuMjMyOTI3OTcsMy43Nzk0MTI1OCBMNC4zNTM2MDE1LDMuNzc5NDEyNTggTDYuNzQ2NDkyMDUsMy43OTYzNTUxMiBaIiBmaWxsPSIjNkU2RTZFIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYuMDAwMDAwLCA2LjAwMDAwMCkgc2NhbGUoLTEsIDEpIHRyYW5zbGF0ZSgtNi4wMDAwMDAsIC02LjAwMDAwMCkgIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==',
position: GC.Spread.Sheets.IconPosition.outsideRight
}
]
};
setIcon(10, 1, style);
//right side in the cell
style = new GC.Spread.Sheets.Style();
style.decoration = {
icons: [
{
src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSIwIDAgMTIgMTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1ICg3ODA3NikgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+b2s8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0ib2siIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIGQ9Ik01LjY3NjUyMjQsMTAgQzUuNjc2NTIyNCwxMCA2LjkxNzAzMjUzLDcuMzM0ODI5MDcgOC40MTk2ODA3OSw1LjMyNjE2ODAyIEM5LjU4MDA5Mzk2LDMuNzc2MzU0NDYgMTEsMi43MTg3NTQxMSAxMSwyLjcxODc1NDExIEwxMC41MTYxMDg0LDIgQzEwLjUxNjEwODQsMiA4Ljk2NzEyNTYsMi43MDIwNjg3NSA3LjU3NzY3MjIzLDQuMDUwMzc0NDYgQzYuMTY4MzYwMTEsNS40MTcyOTA3NiA1LjM0NDg4MTIxLDYuOTQ2NTczNSA1LjM0NDg4MTIxLDYuOTQ2NTczNSBMMy4yOTc0Mzg1Niw1LjAxMTcxMzA5IEwyLDYuNDYwMTI1OTcgTDUuNjc2NTE5ODEsOS45OTk5ODc0NyBMNS42NzY1MTk4MSw5Ljk5OTk4NzQ3IEw1LjY3NjUyMjQsMTAgWiIgaWQ9Ik9LIiBmaWxsPSIjNkU2RTZFIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgIDwvZz4KPC9zdmc+',
position: GC.Spread.Sheets.IconPosition.right
},
]
};
setIcon(1, 6, style);
//right side of the text
style = new GC.Spread.Sheets.Style();
style.decoration = {
icons: [
{
src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSIwIDAgMTIgMTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1ICg3ODA3NikgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+ZWxsaXBzaXM8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iZWxsaXBzaXMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIGQ9Ik0yLDcgQzEuNDQ3NzE1MjUsNyAxLDYuNTUyMjg0NzUgMSw2IEMxLDUuNDQ3NzE1MjUgMS40NDc3MTUyNSw1IDIsNSBDMi41NTIyODQ3NSw1IDMsNS40NDc3MTUyNSAzLDYgQzMsNi41NTIyODQ3NSAyLjU1MjI4NDc1LDcgMiw3IFogTTYsNyBDNS40NDc3MTUyNSw3IDUsNi41NTIyODQ3NSA1LDYgQzUsNS40NDc3MTUyNSA1LjQ0NzcxNTI1LDUgNiw1IEM2LjU1MjI4NDc1LDUgNyw1LjQ0NzcxNTI1IDcsNiBDNyw2LjU1MjI4NDc1IDYuNTUyMjg0NzUsNyA2LDcgWiBNMTAsNyBDOS40NDc3MTUyNSw3IDksNi41NTIyODQ3NSA5LDYgQzksNS40NDc3MTUyNSA5LjQ0NzcxNTI1LDUgMTAsNSBDMTAuNTUyMjg0Nyw1IDExLDUuNDQ3NzE1MjUgMTEsNiBDMTEsNi41NTIyODQ3NSAxMC41NTIyODQ3LDcgMTAsNyBaIiBmaWxsPSIjNkU2RTZFIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==',
position: GC.Spread.Sheets.IconPosition.rightOfText
},
]
};
setIcon(4, 6, style);
//outside right of the cell
style = new GC.Spread.Sheets.Style();
style.decoration = {
icons: [
{
src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSIwIDAgMTIgMTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1ICg3ODA3NikgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+cmVkbzwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJyZWRvIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNNi43NDY0OTIwNSwzLjc5NjM1NTEyIEM4LjUzNjk1MDQyLDMuNzk2MzU1MTIgMTAsNS4xNzQ5NDI4NyAxMCw2Ljg5NzczMTcxIEMxMCw4LjYyMDUyMDU0IDguNTM2OTUwNDIsMTAgNi43NDY0OTIwNSwxMCBMNS4zMzQ4OTI0MiwxMCBDNS4xOTczODA3MywxMCA1LjExMTMxODk5LDkuOTAxOTExNjEgNS4xMTEzMTg5OSw5Ljc2OTkzODE0IEw1LjExMTMxODk5LDkuMjQ0NzE5MzkgQzUuMTExMzE4OTksOS4xMTM2Mzc2MyA1LjIxNDIxODksOC45OTg2MDY3IDUuMzUyNjY2MDQsOC45OTg2MDY3IEw2Ljc0NzQyNzUsOC45OTg2MDY3IEM3Ljk3MDA2NTQ4LDguOTk4NjA2NyA4Ljk1MTM1NjQxLDguMDYzMjAwMTMgOC45NTEzNTY0MSw2Ljg5NzczMTcxIEM4Ljk1MTM1NjQxLDUuNzMyMjYzMjggNy45NjkxMzAwMyw0Ljc5Nzc0ODQzIDYuNzQ2NDkyMDUsNC43OTc3NDg0MyBMNC4zNTM2MDE1LDQuNzk3NzQ4NDMgQzQuMzUzNjAxNSw0Ljc5Nzc0ODQzIDQuMjE2MDg5OCw0Ljc5Nzc0ODQzIDQuMTY0NjM5ODUsNC44MTM3OTkyNSBDNC4wMjcxMjgxNiw0Ljg3OTc4NTk5IDQuMDYxNzM5OTQsNC45Nzc4NzQzOCA0LjE4MTQ3ODAyLDUuMDkyOTA1MzEgTDUuMDI1MjU3MjUsNS44OTcyMzAxMiBDNS4xMjgxNTcxNiw1Ljk5NTMxODUxIDUuMTExMzE4OTksNi4xNDMzNDI4MSA1LjAwODQxOTA4LDYuMjQxNDMxMiBMNC42Mjk1NjAzNCw2LjYwMjU3NDgyIEM0LjUyNjY2MDQzLDYuNzAwNjYzMjEgNC40MDU5ODY5LDYuNzAwNjYzMjEgNC4zMDIxNTE1NCw2LjYxODYyNTY1IEwyLjA2NDU0NjMsNC40ODU2NDkgQzEuOTc4NDg0NTcsNC40MDM2MTE0NCAxLjk3ODQ4NDU3LDQuMjcyNTI5NjggMi4wNjQ1NDYzLDQuMTkwNDkyMTEgTDQuMjg1MzEzMzgsMi4wNzM1NjYyOSBDNC4zODgyMTMyOCwxLjk3NTQ3NzkgNC41NjAzMzY3NiwxLjk3NTQ3NzkgNC42NDYzOTg1LDIuMDczNTY2MjkgTDUuMDA3NDgzNjMsMi40MTc3NjczNyBDNS4xMTAzODM1NCwyLjUxNTg1NTc3IDUuMTEwMzgzNTQsMi42Nzk5MzA4OSA1LjAwNzQ4MzYzLDIuNzYxOTY4NDYgTDQuMTYzNzA0NCwzLjU2NjI5MzI2IEM0LjA2MDgwNDQ5LDMuNjY0MzgxNjUgNC4wNjA4MDQ0OSwzLjc3OTQxMjU4IDQuMjMyOTI3OTcsMy43Nzk0MTI1OCBMNC4zNTM2MDE1LDMuNzc5NDEyNTggTDYuNzQ2NDkyMDUsMy43OTYzNTUxMiBaIiBmaWxsPSIjNkU2RTZFIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYuMDAwMDAwLCA2LjAwMDAwMCkgc2NhbGUoLTEsIDEpIHRyYW5zbGF0ZSgtNi4wMDAwMDAsIC02LjAwMDAwMCkgIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==',
position: GC.Spread.Sheets.IconPosition.outsideRight
}
]
};
setIcon(7, 6, style);
//Icon size
style = new GC.Spread.Sheets.Style();
style.decoration = {
icons: [
{
src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSIwIDAgMTIgMTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1ICg3ODA3NikgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+dW5kbzwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJ1bmRvIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNNi43NDY0OTIwNSwzLjc5NjM1NTEyIEM4LjUzNjk1MDQyLDMuNzk2MzU1MTIgMTAsNS4xNzQ5NDI4NyAxMCw2Ljg5NzczMTcxIEMxMCw4LjYyMDUyMDU0IDguNTM2OTUwNDIsMTAgNi43NDY0OTIwNSwxMCBMNS4zMzQ4OTI0MiwxMCBDNS4xOTczODA3MywxMCA1LjExMTMxODk5LDkuOTAxOTExNjEgNS4xMTEzMTg5OSw5Ljc2OTkzODE0IEw1LjExMTMxODk5LDkuMjQ0NzE5MzkgQzUuMTExMzE4OTksOS4xMTM2Mzc2MyA1LjIxNDIxODksOC45OTg2MDY3IDUuMzUyNjY2MDQsOC45OTg2MDY3IEw2Ljc0NzQyNzUsOC45OTg2MDY3IEM3Ljk3MDA2NTQ4LDguOTk4NjA2NyA4Ljk1MTM1NjQxLDguMDYzMjAwMTMgOC45NTEzNTY0MSw2Ljg5NzczMTcxIEM4Ljk1MTM1NjQxLDUuNzMyMjYzMjggNy45NjkxMzAwMyw0Ljc5Nzc0ODQzIDYuNzQ2NDkyMDUsNC43OTc3NDg0MyBMNC4zNTM2MDE1LDQuNzk3NzQ4NDMgQzQuMzUzNjAxNSw0Ljc5Nzc0ODQzIDQuMjE2MDg5OCw0Ljc5Nzc0ODQzIDQuMTY0NjM5ODUsNC44MTM3OTkyNSBDNC4wMjcxMjgxNiw0Ljg3OTc4NTk5IDQuMDYxNzM5OTQsNC45Nzc4NzQzOCA0LjE4MTQ3ODAyLDUuMDkyOTA1MzEgTDUuMDI1MjU3MjUsNS44OTcyMzAxMiBDNS4xMjgxNTcxNiw1Ljk5NTMxODUxIDUuMTExMzE4OTksNi4xNDMzNDI4MSA1LjAwODQxOTA4LDYuMjQxNDMxMiBMNC42Mjk1NjAzNCw2LjYwMjU3NDgyIEM0LjUyNjY2MDQzLDYuNzAwNjYzMjEgNC40MDU5ODY5LDYuNzAwNjYzMjEgNC4zMDIxNTE1NCw2LjYxODYyNTY1IEwyLjA2NDU0NjMsNC40ODU2NDkgQzEuOTc4NDg0NTcsNC40MDM2MTE0NCAxLjk3ODQ4NDU3LDQuMjcyNTI5NjggMi4wNjQ1NDYzLDQuMTkwNDkyMTEgTDQuMjg1MzEzMzgsMi4wNzM1NjYyOSBDNC4zODgyMTMyOCwxLjk3NTQ3NzkgNC41NjAzMzY3NiwxLjk3NTQ3NzkgNC42NDYzOTg1LDIuMDczNTY2MjkgTDUuMDA3NDgzNjMsMi40MTc3NjczNyBDNS4xMTAzODM1NCwyLjUxNTg1NTc3IDUuMTEwMzgzNTQsMi42Nzk5MzA4OSA1LjAwNzQ4MzYzLDIuNzYxOTY4NDYgTDQuMTYzNzA0NCwzLjU2NjI5MzI2IEM0LjA2MDgwNDQ5LDMuNjY0MzgxNjUgNC4wNjA4MDQ0OSwzLjc3OTQxMjU4IDQuMjMyOTI3OTcsMy43Nzk0MTI1OCBMNC4zNTM2MDE1LDMuNzc5NDEyNTggTDYuNzQ2NDkyMDUsMy43OTYzNTUxMiBaIiBmaWxsPSIjNkU2RTZFIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgIDwvZz4KPC9zdmc+',
position: GC.Spread.Sheets.IconPosition.outsideLeft,
width: 22,
height: 22
},
{
src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSJ0cmFuc3BhcmVudCIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcgOUg1TDUgNS45NjA0NmUtMDhIN0w3IDlaTTYgMTBDNi41NTIyOCAxMCA3IDEwLjQ0NzcgNyAxMUM3IDExLjU1MjMgNi41NTIyOCAxMiA2IDEyQzUuNDQ3NzIgMTIgNSAxMS41NTIzIDUgMTFDNSAxMC40NDc3IDUuNDQ3NzIgMTAgNiAxMFoiIGZpbGw9IiNFNjUyNDkiLz4KPC9zdmc+Cg==',
position: GC.Spread.Sheets.IconPosition.left,
width: 10,
height: 10
},
{
src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABPklEQVR4Ae2YAWYDQRSGV6BUabFQiKE28wA9Qo7Qo/QIBRTQGyQESlUWURRSVdZssL3B5gZJT/A6A8Eq8qck//I+foDxvjWzfi8zuhiGYRg6yZxOs3lMG6N7ZsI0/AYYnEoiCZT44EQSwNfnlEgDkKSNmacrDQuQZQNIUApoepeQAGHavguoCewyG6i+5apfN6q1HDm+0ZWM/yewHKbDTpswujtM4PUiHUAgIO1hAu/XHAIpjThc4NP1XKAWmuBX6PmMSeADFygviQT8Ey6wyHkEVv4eF1gOiQRkjAtUBY9A464wgdmAZ/gga7xKvJzT/4F20D/gIA+IAEGFAIpcgr5C1MUtLsBcIbpQV4jgv/fZzG15K4RM8dXiIud/wB0BF7OlqxDBl9CGOqaMWZ+8QlTFj1ajx7/qg2EYhmH8AtrSH2QJmV2LAAAAAElFTkSuQmCC',
position: GC.Spread.Sheets.IconPosition.leftOfText,
width: 16,
height: 16
},
{
src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSIwIDAgMTIgMTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1ICg3ODA3NikgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+ZWxsaXBzaXM8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iZWxsaXBzaXMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIGQ9Ik0yLDcgQzEuNDQ3NzE1MjUsNyAxLDYuNTUyMjg0NzUgMSw2IEMxLDUuNDQ3NzE1MjUgMS40NDc3MTUyNSw1IDIsNSBDMi41NTIyODQ3NSw1IDMsNS40NDc3MTUyNSAzLDYgQzMsNi41NTIyODQ3NSAyLjU1MjI4NDc1LDcgMiw3IFogTTYsNyBDNS40NDc3MTUyNSw3IDUsNi41NTIyODQ3NSA1LDYgQzUsNS40NDc3MTUyNSA1LjQ0NzcxNTI1LDUgNiw1IEM2LjU1MjI4NDc1LDUgNyw1LjQ0NzcxNTI1IDcsNiBDNyw2LjU1MjI4NDc1IDYuNTUyMjg0NzUsNyA2LDcgWiBNMTAsNyBDOS40NDc3MTUyNSw3IDksNi41NTIyODQ3NSA5LDYgQzksNS40NDc3MTUyNSA5LjQ0NzcxNTI1LDUgMTAsNSBDMTAuNTUyMjg0Nyw1IDExLDUuNDQ3NzE1MjUgMTEsNiBDMTEsNi41NTIyODQ3NSAxMC41NTIyODQ3LDcgMTAsNyBaIiBmaWxsPSIjNkU2RTZFIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==',
position: GC.Spread.Sheets.IconPosition.rightOfText,
width: 14,
height: 14
},
{
src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSIwIDAgMTIgMTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1ICg3ODA3NikgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+b2s8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0ib2siIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIGQ9Ik01LjY3NjUyMjQsMTAgQzUuNjc2NTIyNCwxMCA2LjkxNzAzMjUzLDcuMzM0ODI5MDcgOC40MTk2ODA3OSw1LjMyNjE2ODAyIEM5LjU4MDA5Mzk2LDMuNzc2MzU0NDYgMTEsMi43MTg3NTQxMSAxMSwyLjcxODc1NDExIEwxMC41MTYxMDg0LDIgQzEwLjUxNjEwODQsMiA4Ljk2NzEyNTYsMi43MDIwNjg3NSA3LjU3NzY3MjIzLDQuMDUwMzc0NDYgQzYuMTY4MzYwMTEsNS40MTcyOTA3NiA1LjM0NDg4MTIxLDYuOTQ2NTczNSA1LjM0NDg4MTIxLDYuOTQ2NTczNSBMMy4yOTc0Mzg1Niw1LjAxMTcxMzA5IEwyLDYuNDYwMTI1OTcgTDUuNjc2NTE5ODEsOS45OTk5ODc0NyBMNS42NzY1MTk4MSw5Ljk5OTk4NzQ3IEw1LjY3NjUyMjQsMTAgWiIgaWQ9Ik9LIiBmaWxsPSIjNkU2RTZFIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgIDwvZz4KPC9zdmc+',
position: GC.Spread.Sheets.IconPosition.right,
width: 18,
height: 18
},
{
src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSIwIDAgMTIgMTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1ICg3ODA3NikgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+Y2xlYXI8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iY2xlYXIiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwb2x5Z29uIGZpbGw9IiM2RTZFNkUiIGZpbGwtcnVsZT0ibm9uemVybyIgcG9pbnRzPSI4Ljg3NTQ2MzkgMyAxMCA0LjEyNDUzNjEgNy42MjQ1MzYxIDYuNSAxMCA4Ljg3NTQ2MzkgOC44NzU0NjM5IDEwIDYuNSA3LjYyNDUzNjEgNC4xMjQ1MzYxIDEwIDMgOC44NzU0NjM5IDUuMzc1NDYzOSA2LjUgMyA0LjEyNDUzNjEgNC4xMjQ1MzYxIDMgNi41IDUuMzc1NDYzOSI+PC9wb2x5Z29uPgogICAgPC9nPgo8L3N2Zz4=',
position: GC.Spread.Sheets.IconPosition.right,
width: 18,
height: 18
},
{
src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSIwIDAgMTIgMTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1ICg3ODA3NikgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+cmVkbzwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJyZWRvIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNNi43NDY0OTIwNSwzLjc5NjM1NTEyIEM4LjUzNjk1MDQyLDMuNzk2MzU1MTIgMTAsNS4xNzQ5NDI4NyAxMCw2Ljg5NzczMTcxIEMxMCw4LjYyMDUyMDU0IDguNTM2OTUwNDIsMTAgNi43NDY0OTIwNSwxMCBMNS4zMzQ4OTI0MiwxMCBDNS4xOTczODA3MywxMCA1LjExMTMxODk5LDkuOTAxOTExNjEgNS4xMTEzMTg5OSw5Ljc2OTkzODE0IEw1LjExMTMxODk5LDkuMjQ0NzE5MzkgQzUuMTExMzE4OTksOS4xMTM2Mzc2MyA1LjIxNDIxODksOC45OTg2MDY3IDUuMzUyNjY2MDQsOC45OTg2MDY3IEw2Ljc0NzQyNzUsOC45OTg2MDY3IEM3Ljk3MDA2NTQ4LDguOTk4NjA2NyA4Ljk1MTM1NjQxLDguMDYzMjAwMTMgOC45NTEzNTY0MSw2Ljg5NzczMTcxIEM4Ljk1MTM1NjQxLDUuNzMyMjYzMjggNy45NjkxMzAwMyw0Ljc5Nzc0ODQzIDYuNzQ2NDkyMDUsNC43OTc3NDg0MyBMNC4zNTM2MDE1LDQuNzk3NzQ4NDMgQzQuMzUzNjAxNSw0Ljc5Nzc0ODQzIDQuMjE2MDg5OCw0Ljc5Nzc0ODQzIDQuMTY0NjM5ODUsNC44MTM3OTkyNSBDNC4wMjcxMjgxNiw0Ljg3OTc4NTk5IDQuMDYxNzM5OTQsNC45Nzc4NzQzOCA0LjE4MTQ3ODAyLDUuMDkyOTA1MzEgTDUuMDI1MjU3MjUsNS44OTcyMzAxMiBDNS4xMjgxNTcxNiw1Ljk5NTMxODUxIDUuMTExMzE4OTksNi4xNDMzNDI4MSA1LjAwODQxOTA4LDYuMjQxNDMxMiBMNC42Mjk1NjAzNCw2LjYwMjU3NDgyIEM0LjUyNjY2MDQzLDYuNzAwNjYzMjEgNC40MDU5ODY5LDYuNzAwNjYzMjEgNC4zMDIxNTE1NCw2LjYxODYyNTY1IEwyLjA2NDU0NjMsNC40ODU2NDkgQzEuOTc4NDg0NTcsNC40MDM2MTE0NCAxLjk3ODQ4NDU3LDQuMjcyNTI5NjggMi4wNjQ1NDYzLDQuMTkwNDkyMTEgTDQuMjg1MzEzMzgsMi4wNzM1NjYyOSBDNC4zODgyMTMyOCwxLjk3NTQ3NzkgNC41NjAzMzY3NiwxLjk3NTQ3NzkgNC42NDYzOTg1LDIuMDczNTY2MjkgTDUuMDA3NDgzNjMsMi40MTc3NjczNyBDNS4xMTAzODM1NCwyLjUxNTg1NTc3IDUuMTEwMzgzNTQsMi42Nzk5MzA4OSA1LjAwNzQ4MzYzLDIuNzYxOTY4NDYgTDQuMTYzNzA0NCwzLjU2NjI5MzI2IEM0LjA2MDgwNDQ5LDMuNjY0MzgxNjUgNC4wNjA4MDQ0OSwzLjc3OTQxMjU4IDQuMjMyOTI3OTcsMy43Nzk0MTI1OCBMNC4zNTM2MDE1LDMuNzc5NDEyNTggTDYuNzQ2NDkyMDUsMy43OTYzNTUxMiBaIiBmaWxsPSIjNkU2RTZFIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYuMDAwMDAwLCA2LjAwMDAwMCkgc2NhbGUoLTEsIDEpIHRyYW5zbGF0ZSgtNi4wMDAwMDAsIC02LjAwMDAwMCkgIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==',
position: GC.Spread.Sheets.IconPosition.outsideRight,
width: 22,
height: 22
}
]
};
setIcon(10, 6, style);
sheet.resumePaint();
};
function setLayout(sheet) {
sheet.getRange(2, 0, 1, 10)
.setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin)
, { bottom: true });
sheet.getRange(5, 0, 1, 10)
.setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin)
, { bottom: true });
sheet.getRange(8, 0, 1, 10)
.setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin)
, { bottom: true });
sheet.getRange(11, 0, 1, 10)
.setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin)
, { bottom: true });
sheet.getRange(0, 4, 12, 1)
.setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin)
, { right: true });
sheet.getRange(0, 9, 12, 1)
.setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin)
, { right: true });
for (var i = 0; i < 10; i++) {
let width = 100;
if (i === 1 || i === 6) {
width = 150;
}
sheet.setColumnWidth(i, width);
}
for (var i = 0; i < 30; i++) {
sheet.setRowHeight(i, 25);
i++;
sheet.setRowHeight(i, 25);
i++;
}
sheet.getCell(0, 0).value("Icon on the left side in the cell").font("bold 16px Calibri");
sheet.getCell(3, 0).value("Icon on the left side of the text").font("bold 16px Calibri");
sheet.getCell(6, 0).value("Icon on the outside left of the cell").font("bold 16px Calibri");
sheet.getCell(9, 0).value("Multiple icons").font("bold 16px Calibri");
sheet.getCell(0, 5).value("Icon on the right side in the cell").font("bold 16px Calibri");
sheet.getCell(3, 5).value("Icon on the right side of the text").font("bold 16px Calibri");
sheet.getCell(6, 5).value("Icon on the outside right of the cell").font("bold 16px Calibri");
sheet.getCell(9, 5).value("Icon size").font("bold 16px Calibri");
}

<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" style="width:100%; height: 100%"></div>
</div>
</body>
</html>

.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}