Is it possible to make the AppSheet provided icons available in an SVG Image column??

[WillowMobileSys]

I am building an SVG image to encapsulate a set of metrics and display in one easy to read image. The metrics are represented in various spots in the app using icons from the formatting rules.

I am wondering if there is a way to have our SVG code gain access to the list of AppSheet app icons?

[Jonathon]

Normally you could do that with an SVG but, for security reasons, AppSheet blocks our ability to load external content or run code inside of SVGs.

Instead, you can include the icons directly in your SVG code. AppSheet uses fontawesome for the in-app icons - you should be able to find the respective icons along with their code there

Note that a lot of the icons require you to pay for a fontawesome license.

[WillowMobileSys]

Thanks @Jonathon ! I did come to the conclusion that I needed to do what you describe.

But I am having a heck of a time trying to control placement. Is it possible?

Below is example code for a stethoscope icon. It is drawn with a Path tag. My goal is to be able to place several such icons annotated with text and numbers (similar to the example you showed in the Community a while back!)

In an online SVG viewer tool I can assign this to a group element with an svg and the path and then using a “use” element, I can specify the x,y location. I can also adjust the viewbox, width and height to adjust relative size.

<svg width="500px" height="500px" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="stethoscope">
<svg  width="20px" height="20px" viewBox="0 0 512 512">
<path d="M447.1 112c-34.2.5-62.3 28.4-63 62.6-.5 24.3 12.5 45.6 32 56.8V344c0 57.3-50.2 104-112 104-60 0-109.2-44.1-111.9-99.2C265 333.8 320 269.2 320 192V36.6c0-11.4-8.1-21.3-19.3-23.5L237.8.5c-13-2.6-25.6 5.8-28.2 18.8L206.4 35c-2.6 13 5.8 25.6 18.8 28.2l30.7 6.1v121.4c0 52.9-42.2 96.7-95.1 97.2-53.4.5-96.9-42.7-96.9-96V69.4l30.7-6.1c13-2.6 21.4-15.2 18.8-28.2l-3.1-15.7C107.7 6.4 95.1-2 82.1.6L19.3 13C8.1 15.3 0 25.1 0 36.6V192c0 77.3 55.1 142 128.1 156.8C130.7 439.2 208.6 512 304 512c97 0 176-75.4 176-168V231.4c19.1-11.1 32-31.7 32-55.4 0-35.7-29.2-64.5-64.9-64zm.9 80c-8.8 0-16-7.2-16-16s7.2-16 16-16 16 7.2 16 16-7.2 16-16 16z"/>
</svg>
</g>
  
  </defs>
  
  <use href="#stethoscope" x="100" y="100"/>
  </svg>

This results in a placed icon as follows:

If I try doing this within an Image column in the app it doesn’t work. Maybe not supported? I can show the straight Path element but it obviously uses the default starting location. While I can adjust the size, I can’t seem to figure out how to relocate it within the viewbox. What am I missing?

CONCATENATE("data&colon;image/svg+xml;utf8, <svg xmlns=""http://www.w3.org/2000/svg"" width=""50px"" height=""50px"" viewBox=""0 0 2000 1200""> 

<path id=""stethoscope"" d=""M447.1 112c-34.2.5-62.3 28.4-63 62.6-.5 24.3 12.5 45.6 32 56.8V344c0 57.3-50.2 104-112 104-60 0-109.2-44.1-111.9-99.2C265 333.8 320 269.2 320 192V36.6c0-11.4-8.1-21.3-19.3-23.5L237.8.5c-13-2.6-25.6 5.8-28.2 18.8L206.4 35c-2.6 13 5.8 25.6 18.8 28.2l30.7 6.1v121.4c0 52.9-42.2 96.7-95.1 97.2-53.4.5-96.9-42.7-96.9-96V69.4l30.7-6.1c13-2.6 21.4-15.2 18.8-28.2l-3.1-15.7C107.7 6.4 95.1-2 82.1.6L19.3 13C8.1 15.3 0 25.1 0 36.6V192c0 77.3 55.1 142 128.1 156.8C130.7 439.2 208.6 512 304 512c97 0 176-75.4 176-168V231.4c19.1-11.1 32-31.7 32-55.4 0-35.7-29.2-64.5-64.9-64zm.9 80c-8.8 0-16-7.2-16-16s7.2-16 16-16 16 7.2 16 16-7.2 16-16 16z""/>

</svg>")

[Jonathon]

One way would be to use use transform=‘translate(x,y)’:

"data:image/svg+xml;utf8,
<svg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px' viewBox='0 0 2000 1200'>
  <g transform='translate(1,2)'>
    <path id='stethoscope' d='M447.1 112c-34.2.5-62.3 28.4-63 62.6-.5 24.3 12.5 45.6 32 56.8V344c0 57.3-50.2 104-112 104-60 0-109.2-44.1-111.9-99.2C265 333.8 320 269.2 320 192V36.6c0-11.4-8.1-21.3-19.3-23.5L237.8.5c-13-2.6-25.6 5.8-28.2 18.8L206.4 35c-2.6 13 5.8 25.6 18.8 28.2l30.7 6.1v121.4c0 52.9-42.2 96.7-95.1 97.2-53.4.5-96.9-42.7-96.9-96V69.4l30.7-6.1c13-2.6 21.4-15.2 18.8-28.2l-3.1-15.7C107.7 6.4 95.1-2 82.1.6L19.3 13C8.1 15.3 0 25.1 0 36.6V192c0 77.3 55.1 142 128.1 156.8C130.7 439.2 208.6 512 304 512c97 0 176-75.4 176-168V231.4c19.1-11.1 32-31.7 32-55.4 0-35.7-29.2-64.5-64.9-64zm.9 80c-8.8 0-16-7.2-16-16s7.2-16 16-16 16 7.2 16 16-7.2 16-16 16z'/>
  </g>
</svg>"

[WillowMobileSys]

Yes that works!

[dbaum]

FYI, anyone else finding their way here: It looks like AppSheet’s icons are from Font Awesome v5.15.4, not the current v6.4.0.