Icon as button

Using Streamlit
,
1 
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?

2

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!

1 Like
3

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?

4

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

3 Likes
5

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

6

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

1 Like
Icon as button that is aligned right
7

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