CODEWITHSUNDEEP
iconsloadassetsflet
Fernando
Fernando

Reputation: 7

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.

Upvotes: 1

Views: 3397

Answers (2)

Hebabaze Salaheddine
Hebabaze Salaheddine

Reputation: 1

you can use something like this

            TextButton(content=Row([Image(src="img/wtsp.png", height=24, width=24),  # Custom image for WhatsApp
                    Text("WhatsApp")  # Text label for the button
                ]),on_click=lambda _: page.launch_url(f"https://wa.me/{phone_number}"),),

Upvotes: 0

Akın
Akın

Reputation: 46

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

Upvotes: 2

Related Questions