Power Chart icons

Here is a post with a tool that opens up the actual Material Symbols available from google fonts.

I'm not sure if IA grabbed the icons from the Materials Library in this case or if they created them manually. I'll admit it is surprising that those Icons are not readily available.

That being said, here are the main four from the power chart, just paste the JSON onto your view.

[{
	"meta": {
	  "name": "annotation"
	},
	"position": {
	  "height": 24,
	  "width": 24,
	  "x": 565,
	  "y": 290
	},
	"props": {
	  "elements": [
		{
		  "d": "M18,6c0.552285,0 1,0.447715 1,1v12l-3,-2h-10c-0.552285,0 -1,-0.447715 -1,-1v-9c0,-0.552285 0.447715,-1 1,-1h12Zm-2,7h-8v1h8v-1Zm0,-2h-8v1h8v-1Zm0,-2h-8v1h8v-1Z",
		  "name": "path",
		  "type": "path"
		}
	  ],
	  "viewBox": "0 0 24 24"
	},
	"type": "ia.shapes.svg"
},
{
	"meta": {
	  "name": "rangeBrush"
	},
	"position": {
	  "height": 24,
	  "width": 24,
	  "x": 565,
	  "y": 261
	},
	"props": {
	  "elements": [
		{
		  "d": "M10,15v4h4v-4h1v4c0,0.552285 -0.447715,1 -1,1h-4c-0.552285,0 -1,-0.447715 -1,-1v-4h1Zm6,-7l5,5l-5,4v-3h-8.06178v3l-4.93822,-4l4.93822,-5v3h8.06178v-3Zm-2,-3c0.552285,0 1,0.447715 1,1v4h-1v-4h-4v4h-1v-4c0,-0.552285 0.447715,-1 1,-1h4Z",
		  "name": "path",
		  "type": "path"
		}
	  ],
	  "viewBox": "0 0 24 24"
	},
	"type": "ia.shapes.svg"
},
{
	"meta": {
	  "name": "xTrace"
	},
	"position": {
	  "height": 24,
	  "width": 24,
	  "x": 565,
	  "y": 237
	},
	"props": {
	  "elements": [
		{
		  "d": "M15,17v3h-2v-3h2Zm-4.77865,-6.8322l0.0961086,0.0729421l1.68219,1.44132v2.635l-2.18865,-1.87506l-4.02165,5.17194l-1.5787,-1.22788l4.66667,-6c0.325497,-0.418497 0.914468,-0.505473 1.34403,-0.218258Zm4.77865,2.8322v3h-2v-3h2Zm3.21065,-4.61394l1.5787,1.22788l-3.7897,4.87112v-3.258l2.211,-2.841Zm-3.21065,0.613941v3h-2v-3h2Zm0,-4v3h-2v-3h2Z",
		  "name": "path",
		  "type": "path"
		}
	  ],
	  "viewBox": "0 0 24 24"
	},
	"type": "ia.shapes.svg"
},
{
	"meta": {
	  "name": "panAndZoom"
	},
	"position": {
	  "height": 24,
	  "width": 24,
	  "x": 565,
	  "y": 213
	},
	"props": {
	  "elements": [
		{
		  "d": "M12,5l3,3h-2l-0.001,3h3.001v-2l3,3l-3,3v-2h-3.001l0.001,3h2l-3,3l-3,-3h2l-0.001,-3h-2.999v2l-3,-3l3,-3v2h2.999l0.001,-3h-2Z",
		  "name": "path",
		  "type": "path"
		}
	  ],
	  "viewBox": "0 0 24 24"
	},
	"type": "ia.shapes.svg"
}]

If you want them to appear exactly as they do in the power chart, then you'll need to use a little CSS.

The class that IA uses is ia_powerChartComponent__icon (NOTE: Two underscores prior to icon).

1 Like