Gojs icon not honouring default size and color of text

Hi There,
I have a requirement where I need to show icon (gojs shapes/svg icons) and text side by side something like below
image

I referred (Icons GoJS Sample) document and tried to use gojs svg icons as below

my row data (Yellow marked values of geo properties are for svg paths)
image

With this Im able to get the below result
image

But you can see icons size are too big and colors also do not match with the color of the text next to these icons.

I can set width and height of these icons and get the result like below


result after setting height and width
image

My question is can I somehow render these icons with same font size & color that of text next to it? without manually setting it. Manually setting sizes and color is not giving me icons I want.

It sounds like you want these Shapes to stretch. This is possible, but it depends on the rules in the outer panel.

If these are just in a table, try setting the Shape’s stretch to go.GraphObject.Fill. If this Shape is in the same row as the TextBlock, its height will be constrained by the text height. Then, set geometryStretch to go.GraphObject.Uniform, which will constrain the shape’s width by the same amount.

Here’s a basic example of that: https://codepen.io/simonsarris/pen/QWmGRPG?editors=1010

Without the stretch, the triangles would be 100x100