Icon as button

st.markdown(
    '''
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <button id="my_button" style="background: none; border: none;"><i class="far fa-file-pdf"></i></button>
    ''',
    unsafe_allow_html=True
)

def my_function():
    st.write("Button clicked!")

I want when I click that pdf icon, I get a message like Button clicked!

How to use icons in a st.button?

Hi @Aryan_Gupta

The following related post shows how to add an icon to st.button:

As for displaying a message after a button is clicked can be achieved using the following logic:

btn = st.button('Click me')
if btn:
   st.write('Button clicked!')

Hope this helps!

Hi @dataprofessor,

I already went through this, I tried running it, but it’s not working for me.
As in this code, I want in place of Click me, an icon from font-awesome.

btn = st.button('Click me')
if btn:
   st.write('Button clicked!')

Is that possible?

Here’s one way to accomplish it

import streamlit as st
from streamlit_extras.stylable_container import stylable_container

st.markdown(
    '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"/>',
    unsafe_allow_html=True,
)


with stylable_container(
    key="container_with_border",
    css_styles=r"""
        button p:before {
            font-family: 'Font Awesome 5 Free';
            content: '\f1c1';
            display: inline-block;
            padding-right: 3px;
            vertical-align: middle;
            font-weight: 900;
        }
        """,
):
    st.button("Button with icon")

I found the f1c1 from going to File Pdf Classic Solid Icon | Font Awesome and clicking on “copy unicode”

You can see it running here:
https://stlite.streamlit.app/?q=14e85c

1 Like

Thanks @blackary
But what if I just want that icon and not Button with icon written beside?

You can tweak the CSS to target the button div instead of button p, and then to st.button("")

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.