search

streamlit / streamlit

Streamlit — A faster way to build and share data apps.
https://streamlit.io
Apache License 2.0
33.05k stars 2.89k forks source link

Support inline material icons in markdown #8783

Open LukasMasuch opened 4 weeks ago

LukasMasuch commented 4 weeks ago

Checklist

Summary

Allow the use of the recently added material icons within markdown text.

Why?

It provides more flexibility to build professional-looking apps. Currently, only emojis can be used.

How?

Support the shortcode syntax :material/search: and convert it to an inline-icon when used within markdown. In the best case, this works wherever markdown is supported (e.g. st.markdown, labels, ...).

Additional Context

No response

github-actions[bot] commented 4 weeks ago

To help Streamlit prioritize this feature, react with a 👍 (thumbs up emoji) to the initial post.

Your vote helps us identify which enhancements matter most to our users.

Visits

prose-leviathan commented 3 weeks ago

This would be a fantastic addition, and I believe the right fulfillment of https://github.com/streamlit/streamlit/issues/7273

sfc-gh-jcarroll commented 2 weeks ago

I want to add this as I think it has a bunch of great applications.

While it won't help for labels, etc there is a workaround for doing it in-line in st.markdown() itself

st.markdown(
    """ DONE <span style="font-family: 'Material Symbols Outlined'">done_all</span>""",
    unsafe_allow_html=True,
)
cquangc commented 2 weeks ago

Me too. I can see lots of applications in apps with markdown. For instance, bullets don't have to be emojis, instructions to users can include material design icons to sync up with menu etc. instructions elsewhere, section dividers can correspond to pages in the app etc.

Odrec commented 2 weeks ago

Users of our app are asking for more professional-looking app and I think adding these icons for button labels would be ideal.

LukasMasuch commented 2 weeks ago

I worked on a quick prototype today for this here. You can try it out here: https://icons-in-markdown.streamlit.app/

danilo-css commented 13 hours ago

I worked on a quick prototype today for this here. You can try it out here: https://icons-in-markdown.streamlit.app/

Works perfectly for me, doesn't even look like a prototype. I think this is the perfect application for this feature. Not only you can write st.markdown, but you can make labels look much better on other widgets.