st.expander _arrow_ issue

Using Streamlit
1

Hi,

I’m experiencing a strange issue with st.expander that I haven’t been able to solve. When I run the app locally, everything works correctly. However, after deployment, _arrow_right and _arrow_down appear before the expander title every time I use st.expander.

with st.expander("TEST EXPANDER"):
    st.write("OK")

Instead of showing “TEST EXPANDER”, it shows

image
image1083×172 5.39 KB

Environment details:

  • Python: 3.11.9

  • Streamlit: 1.54.0

Has anyone encountered this issue before?
Any help would be greatly appreciated.

Thank you!

2

Welcome to the community, and thanks for your detailed question! :blush: It seems likely that the appearance of _arrow_right and _arrow_down before your expander title after deployment is related to a recent design update in Streamlit’s expander component. According to the Streamlit 1.47.0+ changelog and PRs, the expander UI was redesigned, and the arrow icons are now more prominent to indicate expand/collapse state.

This is expected behavior in newer Streamlit versions, and the arrows are part of the intended UX. If you want to customize or hide these arrows, you’d need to use custom CSS, but there’s no built-in parameter to remove them. If you’re seeing double arrows or unexpected icons, it could be a theme or CSS conflict—please check for any custom styles or third-party components that might affect the expander. For more on the new design, see this PR discussion.

Sources:

3

Hi, I’m experiencing a similar issue as well.

I haven’t deployed it, but when I run it locally, it displays “arrow_right” when the expander is closed and “arrow_down” when its opened.

Env details

Python: 3.12

Streamlit: 1.54

4

Thanks for your answer. I’ve found the solution

5

This is alternative solution for that, you can try to inspect the element (click on the “_arrow_right”)

Mine:

<span color="inherit" data-testid="stIconMaterial" translate="no" class="st-emotion-cache-1c9yjad exvv1vr0">keyboard_arrow_down</span>

You can hide the arrow icon with this

st.markdown("""
<style>
[data-testid="stIconMaterial"] {
    display: none !important;
}
</style>
""", unsafe_allow_html=True)

It displays

image