How to use own icons in Flet

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.

Solution

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