Hi Colette,
Setting icon colour independently of text colour
As predicted, here’s a solution, and yes, there is a tiny bit of CSS!
I created a Custom Component that allows you to set icon and text colours separately (garish colours optional):
You can clone the app into your account by clicking this link, and modify it to suit your needs:
https://anvil.works/build#clone:VUTJWCMKTSZOWIZX=KXDO7OZ77BUUCJ2K22TUCBSN
You can import this app into other apps in order to use the same component in multiple apps. See this section of the ref docs.
You can set the contents and colours using the text, icon, text_colour and icon_colour properties of the component:
It’s a Custom HTML Component with this in the HTML part:
<script>
function setIconColour(colour){
$(this).find('.anvil-component-icon').css('color', colour)
}
</script>
It sets the Label text, icon, text colour and icon colour when the component’s show event fires:
def form_show(self, **event_args):
"""This method is called when the HTML panel is shown on the screen"""
self.label_1.text = self.text
self.label_1.icon = self.icon
self.label_1.foreground = self.text_colour
self.call_js('setIconColour', self.icon_colour)
Labels and Links have properties for bold, etc.
As mentioned by @alcampopiano: Labels have properties to set bold, italics, underlining, fonts and font sizes, and alignment. You can use a Link component to display URLs and do something when the link is clicked (by default, they open the url property in a new browser tab.)
Rich text, compiling markup languages, and other fancy stuff
You can also do very detailed text styling using any third-party library. See this Forum thread for some discussion of that.
Currently installed on Server Modules are: Pygments for syntax highlighting, mistune for Markdown, and bbcode. Just ask if you want something installed.
You can import Javascript libraries to use on the client using Anvil’s Native Libraries, which you can find in the App Browser. In that Forum Thread I explain how to use highlight.js to perform syntax highlighting in the browser. (You can call JavaScript from the client-side Python)
I hope the IconLabel I made fits your use-case. Let me know whether it does, and if you need more info.