Power Chart icons

I'm probably just not as smart as I think I am but are these Powerchart icons available anywhere for use to place on elsewhere on Perspective screens. Mainly looking for the pan and zoom, xTrace and Annotation icons. I don't see them directly in the material library and they don't appear to be in the Ignition one either... I did see the reverse of the annotation one in the material library.

image

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

None at all, IA provides some of the Google Fonts material symbols with Ignition

Thank you. These worked well for my use case.