Add gif icons in the NavigationRail

[ingdesarr1]

Question

Good afternoon. In the moment, I want to add a GIF icon in the NavigationRailDestination, to add more animation to the Rail. I try add like a icon, but the NavigationRail dont show anything. I try add like a Image, but same problem. If I add a image, like a PNG, the NavigationRail shows perfect, but not for GIF. Is any way to do that?

Thanks

Code sample

Rail = ft.NavigationRail(
        selected_index=0,
        label_type=ft.NavigationRailLabelType.SELECTED,
        extended=False,
        min_width=50,
        min_extended_width=150,
        bgcolor="indigo50",
        # height=page.height,
        leading=opciones("NC","Nicolas Cumaco","Ingeniero de automatización"),
        group_alignment=-0.95,
        destinations=[
            ft.NavigationRailDestination(
                icon_content=ft.Image(
                    src=f"images/engranajes.gif",
                    fit=ft.ImageFit.CONTAIN,
                ), 
                # icon=ft.icons.DASHBOARD_OUTLINED, 
                selected_icon=ft.icons.DASHBOARD, 
                label="Proceso"
            ),
            ft.NavigationRailDestination(
                icon_content=ft.Icon(ft.icons.FEATURED_PLAY_LIST_OUTLINED),
                selected_icon_content=ft.Icon(ft.icons.FEATURED_PLAY_LIST),
                label = "Formulacion"
            ),
            ft.NavigationRailDestination(
                icon=ft.icons.PERSON_OUTLINED,
                selected_icon_content=ft.Icon(ft.icons.PERSON),
                label_content=ft.Text("Usuarios"),
            ),
        ],
        on_change= lambda e: page.go(ruta(e.control.selected_index)),
        # on_change= lambda e: print("Seleccionado: ",e.control.selected_index),
    )

Error message

No response

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[plugeit]

for me not even the png worked

[plugeit]

since my logo was mostly text based so i used text instead of image reliable fast and just works

[ndonkoHenri]

Working example:

import flet as ft

def main(page: ft.Page):

    rail = ft.NavigationRail(
        selected_index=0,
        label_type=ft.NavigationRailLabelType.ALL,
        # extended=True,
        min_width=100,
        min_extended_width=400,
        leading=ft.FloatingActionButton(icon=ft.icons.CREATE, text="Add"),
        group_alignment=-0.9,
        destinations=[
            ft.NavigationRailDestination(
                icon=ft.icons.FAVORITE_BORDER, selected_icon=ft.icons.FAVORITE, label="First"
            ),
            ft.NavigationRailDestination(
                icon_content=ft.Icon(ft.icons.BOOKMARK_BORDER),
                selected_icon_content=ft.Icon(ft.icons.BOOKMARK),
                label="Second",
            ),
            ft.NavigationRailDestination(
                icon_content=ft.Image("https://media.tenor.com/91CDWkTTVNkAAAAC/rilakkuma-laughing.gif", width=25, height=25),
                selected_icon_content=ft.Image("https://media.tenor.com/-Y2YOay3_JoAAAAC/its-friday-dancing.gif", width=25, height=25),
                label_content=ft.Text("GIF"),
            ),
        ],
        on_change=lambda e: print("Selected destination:", e.control.selected_index),
    )

    page.add(
        ft.Row(
            [
                rail,
                ft.VerticalDivider(width=1),
                ft.Column([ ft.Text("Body!")], alignment=ft.MainAxisAlignment.START, expand=True),
            ],
            expand=True,
        )
    )

ft.app(target=main)

[ingdesarr1]

It works perfect. Thank you very much.