Code Editor for app.py

import streamlit as st
from streamlit_extras.icon_spinner import icon_spinner
from streamlit_extras.material_icons import material_icons

st.title("Multiselect with Material Symbols Icons")

# Dictionary of icons with their names
icons = {
    "favorite": "Favorite",
    "home": "Home",
    "settings": "Settings",
    "shopping_cart": "Shopping Cart",
    "star": "Star",
    "person": "Person",
    "notifications": "Notifications",
    "delete": "Delete",
    "search": "Search",
    "menu": "Menu"
}

# Custom format function to display icons alongside text
def format_icon_option(option):
    icon_name = option
    label = icons[option]
    return f"{material_icons(icon_name, size=20)} {label}"

# Multiselect with icons
selected_icons = st.multiselect(
    "Select your favorite icons",
    options=list(icons.keys()),
    default=["favorite", "star"],
    format_func=format_icon_option,
    placeholder="Choose icons..."
)

# Display selected icons with a bit more emphasis
if selected_icons:
    st.write("### You selected:")
    
    # Display each selected icon in a horizontal arrangement
    cols = st.columns(len(selected_icons))
    for i, icon in enumerate(selected_icons):
        with cols[i]:
            with icon_spinner(material_icons(icon, size=40), animation_time=1, spinner_width=50):
                st.write(icons[icon])

# Show a preview of all available icons
with st.expander("View all available icons"):
    st.write("Here's a preview of all the available icons:")
    
    # Create a grid layout to display all icons
    grid_cols = 5
    rows = [icons.keys()][0][i:i+grid_cols] for i in range(0, len(icons), grid_cols)]
    
    for row in rows:
        cols = st.columns(grid_cols)
        for i, icon_name in enumerate(row):
            with cols[i]:
                st.markdown(f"{material_icons(icon_name, size=30)}")
                st.caption(icons[icon_name])