1

I can't find how to load my own icons in Flet.

I'm testing Flet with the intention of making a desktop app (pure desktop, not Internet needed), but I'm not able to use my own icons to begin with. I can only use the ones that come inside ft.icons, but I'd rather use my own by loading them from a folder similar to /assets/icons. Can I do that? How?

Thanks.

Fernando
  • 13
  • 2

1 Answers1

1

Currently, I don't see a way of doing this; however, you could use the Image class instead.

I would suggest you create an assets folder under your main project folder.

Let's assume you have the following folder structure on your project:

/assets
   /icons/my-icon.png
main.py

When you are running your app, you should provide that folder to the initializer in the following way:

flet.app(target=YourApp(), assets_dir="assets")

Then you can access your images there directly and create an Image instance in the following way:

test_image = flet.Image(src="icons/my-icon.png", width=32, height=32, tooltip="Image Tooltip")

You can nest these Image controls inside of anything you want, so you have a lot of flexibility.

The only downside of doing it this way is if you are using light/dark themes on your app. Compared to the Icon class, you will have to specify the light/dark theme versions yourself and update them manually when you are switching your theme.

Here is the official documentation

Akın
  • 36
  • 4
  • Works. Here an example: add_img = Image(src='add.png', width=32, height=32, tooltip='Suma 1') add_button = ElevatedButton( width=60, height=40, on_click=plus_click, content=Row([add_img], alignment=flet.MainAxisAlignment.SPACE_AROUND)) Although I would prefer to have an on_click event on the image and it would save me the button. – Fernando Jan 12 '23 at 21:15