How to add custom icon?

[Haadi-A]

Hi @ndonkoHenri, @DavMelchi I'm trying to add a gender icon to label the gender of my users. But when I typed ft.icons and go through icons I do not find an option for gender. So I have designed an icon for gender in Figma and I'm wondering if there is a way to use it in my app.

[ndonkoHenri]

Hey. In what format does your figma renders your icon?

Here is an example of combining Image control with svg to have icons: https://github.com/flet-dev/examples/blob/main/python/controls/image/svg-lucide.py

[Haadi-A]

png jpg svg . I'm trying the link.

[iron3oxide]

Good news: you probably don't have to use a custom icon at all as there are gender icons in the default pack. Just search for "male" in the icons browser.

[ndonkoHenri]

@FeodorFitsner, could you please try the clipboard issue on your iPhone with your icons browser? It seems to work perfectly 😂
Waiting for confirmation on your end.

[FeodorFitsner]

Works great for me!

[ndonkoHenri]

Hurray

[ghost]

from io import BytesIO
from PIL import Image
import base64


def image2base64(img: Image) -> str:
    """returns utf-8 decoded base64 string"""
    buffered = BytesIO()
    img = img.convert('RGBA')
    img.save(buffered, format="PNG")
    img_str = base64.b64encode(buffered.getvalue())
    buffered.truncate()
    return img_str.decode("utf-8")

that's how i do it with any RGBA pixel images. Just use the output as src_base64 for a flet.Image() object.
edit the format of img.convert() to whatever you need.
if it's a vector image (e.g. svg) i would prefer this answer