How to change css class of the page-emoji part generated from st_pages?

[chattarinwan]

Thank @blackary ,I have been using st_pages to set the page name, page file reference, and page icon for a while now. However, I wish that I could use the google icon instead of the emoji, so I experimented with something as follow:

1. I imported google icon class to streamlit using
   st.write('<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />', unsafe_allow_html=True)

2. I used google icon’s name (e.g., partly_cloudy_day) instead of the emoji to set the page icon.

show_pages(
    [
        Page("app-page-home.py", "็Home", "partly_cloudy_day"),
        Page("app.py", "Tab 1", "partly_cloudy_day"),
        Page("test.py", "Tab 2", "partly_cloudy_day"),
        Page("app-pages/page-blank-1.py", "Tab 3", "partly_cloudy_day"),
        Page("app-pages/page-blank-2.py", "Tab 4", "partly_cloudy_day"),
        Page("app-pages/page-blank-3.py", "Tab 5", "partly_cloudy_day"),
    ]
)

3. The original result is shown below.
   
   

Besides, the CSS class of the st-page’s emoji part is <span aria-hidden="true" class="css-8hkptd e1fb0mya0">partly_cloudy_day</span>

4. Now, if I manually change the class of st-page’s emoji part to <span aria-hidden="true" class="material-symbols-outlined">partly_cloudy_day</span> using the web inspect tool, my desired outcome is granted.

To achieve the output as shown in step 4, my big question is "How can I permanently change the “class of st-page’s emoji part using code, instead of just manually changing them via the web inspect tool?”

Also, please find the HTML structure of the sample page, where the highlighted part is the element of st-page’s emoji part.

Many thanks in advance for your response.

[blackary]

Here is a way to do it by applying the css from the materials-symbols-outlined class to the appropriate object directly, rather than adding that class.

import streamlit as st
from st_pages import Page, show_pages

st.write(
    '<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />',
    unsafe_allow_html=True,
)


show_pages(
    [
        Page("page1.py", "Home", "partly_cloudy_day"),
        Page("page2.py", "Tab 1", "app_registration"),
    ]
)

st.write("Yo")


st.markdown(
    """

<style>
    .css-8hkptd {
        font-family: 'Material Symbols Outlined';
        font-weight: normal;
        font-style: normal;
        font-size: 24px;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-feature-settings: 'liga';
        -webkit-font-smoothing: antialiased;
        color: black !important;
    }
</style>
    """,
    unsafe_allow_html=True,
)

Which yields

[chattarinwan]

Thank you so much! This works like charm