[CLOSED] Icons with and without text not aligned

It looks like labels with icon and text and labels with icon and no text are not aligned properly in a row.

16

47

Example code:

from anvil import *

class TestLabels(TestLabelsTemplate):
  def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)
    
    # Any code you write here will run when the form opens.
    self.panel = FlowPanel()
    self.panel.add_component(Label(icon='fa:plus'))
    self.panel.add_component(Label(icon='fa:plus', text='Plus'))
    self.add_component(self.panel)
    
    # Uncomment to realign labels
    # self.panel.get_components()[0].text = 'Plus'

Text in Labels has a non-zero margin by default. However, this only applies to the text itself, so if a Label doesn’t have any text in it, the margin is smaller. We’ll consider modifying the Material Design theme to add the margin to the icon as well so the spacing is the same regardless.

As it stands, if you want to get the Label with no text to align vertically with the Label that has text, you can apply the text role to the Label with text. The text role is intended to allow multiple Labels to appear as one block of text.

https://anvil.works/build#clone:NH6EWVR5YOK4VZGO=2LG3SZKY7KBZ4SQ2IHK73VID

1 Like

Thanks! It’s a bit confusing that two labels with the same role have different appearances.