There’s a number of areas where icons aren’t yet supported (i.e. WebButton) or are supported but in a limited way (i.e. WebMenuItem) - Maybe you want more than one icon or icons at the end versus the start?
Remember there’s the Raw Tag to allow you to inject HTML in many more places, which can be coupled with the Data attribute of the WebPicture’s BootstrapIcon’s Helper Function:
me.caption = "<raw>"+str(WebPicture.BootstrapIcon("alarm fill",color.Red).Data)+"</raw>"
You may want wrap the SVG in an additional div with classes for CSS formatting but it depends on the use case and your bootstrap theme. Hopefully this helps someone, it did for me
For WebMenuItem I found putting it in a span with position absolute allowed it to align correctly:
<span style="position: absolute;">
For WebButton I found wrapping in this helped:
<span style="position: inherit;top: -3px;">
Also wrapping it in a div for WebButton will make it be on a new line and make a “tall” button
I’ll also note that while you could wrap it in an image tag and use the url link:
<img src="/_files/9393-3533-3537-4621-7927/alarm-fill.svg" width="16" height="16" class="align-middle">
But this creates a worse experience as it takes an extra network call for the image to load - meaning it doesn’t load as fast and the image may appear to pop into view after a delay versus the SVG data route which renders it instantly and allows more granular control for potential CSS effects and DOM manipulations.