Metric: replace arrow with circle

[Peterson_Davis]

Summary

I’m trying to replace the upper and lower arrows in the Metric component by changing the CSS directly and adding a circle instead. Unfortunately, the code does not work.

Steps to reproduce

Code snippet:

replace_metric_arrow: str = """
    <style>
    [data-testid="stMetricDelta"] svg {
        display: <circle cx="50" cy="50" r="50" />;
    }
    </style>
"""

# remove the arrow in the metrics and use a circle instead
st.write(replace_metric_arrow ,unsafe_allow_html=True)

[mathcatsand]

It’s hacky, but…

import streamlit as st

st.metric(label='My Metric', value=10000, delta=10)

css = '''
<style>
    [data-testid="stMetricDelta"] svg {
        display: none;
    }
    [data-testid="stMetricDelta"] > div::before {
        content:"◯";
        font-weight: bold;
    }
</style>
'''

st.markdown(css, unsafe_allow_html=True)

And here’s a different post about centering if that’s desirable, too.