Why does icon not show up when button generated from python code?

Anvil Q&A
1

What I’m trying to do:
I’m trying to add an icon to a button that’s generated from Python code.

What I’ve tried and what’s not working:
I have a dummy app where I insert a button with an icon by using the UI and insert two button from init like this:

# attempt 1, icon field similar to IconButton
self.add_component(Button(icon='mi:123'))
# attempt 2
self.add_component(Button(icon='123'))

I don’t understand why the icon does not show up in the buttons created from Python. Am I missing something?

image

Clone link:
(Anvil | Login)

2

This is probably happening because you are using the base Button instead of the M3 Beta button.

The short answer is: just add the following to the top of your form below other imports but above the class definition:

from m3.components import Button

The long answer: the M3 Beta version of anvil apps replace a lot of basic elements in the designer, one of them being the button. However, in code, when you create a Button, you are creating the native anvil Button, not the M3. So you need to manually import to the context to replace the original in that context.

You can also do this globally in you startup module (if you have one) by doing:

# not tested!
from m3.components import Button as NewButton
import anvil
anvil.Button = NewButton

This makes that the default button will be M3.Button

Also, the icon doesn’t work because the old button uses a different type of icon: from fontawesome. They start with 'fa:...' and work a little different, so that’s why it didn’t work.

3 Likes
3

Thank you that was the issue!

Not the first time I got tripped up between an m3 component and a base component.

1 Like
4

Might be worth considering using minimal templates (see the look and feel settings). That way you’ll be less likely to accidentally use an anvil component (which comes from the from anvil import * line)

1 Like