Representing a HTML Button as an Icon

Dash Python
1

I have been searching but I can’t find a solution, I am guessing it is a simple problem. I am trying to represent a button as an icon.
Take for example, the following code from Dash User Guide:

app.layout = html.Div([
    dcc.Input(id='input-1-state', type='text', value='Montréal'),
    dcc.Input(id='input-2-state', type='text', value='Canada'),
    html.Button(id='submit-button', n_clicks=0, children='Submit'),
    html.Div(id='output-state')
])

This code will produce the following output:

Example%201
Example 1.png839×116 3.45 KB

I am trying to do something where instead of the rectangular shaped button with string, I would like an icon to replace it.
Something like:

Example%202
Example 2.png839×116 3.29 KB

HTML code for an icon would normally be something like:
<i class="icon_name"></i>

So is there an equivalent of this HTML in Dash?

Thanks

1 Like
2

Every html component has the n_clicks property, not just the html.Button. So you could use html.I if you wanted to here.

2 Likes
3

Oh wow that is so easy. Thanks for replying quickly and your help. For others who might need to know. The code I used and the corresponding output is:

app.css.append_css({'external_url': 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'})

app.layout = html.Div([
    dcc.Input(id='input-1-state', type='text', value='Montréal'),
    dcc.Input(id='input-2-state', type='text', value='Canada'),
    html.I(id='submit-button', n_clicks=0, className='fa fa-send'),
    html.Div(id='output-state')
])

Output_Image

4 Likes
4

@chriddyp @tcbegley I want to get the value of the button when it is clicked.

import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    html.Div(dbc.Input(id='input-box', type='text')),
    dbc.Button('ButtonValue', id='button'),
    html.Div(id='container-button-basic',
             children='Enter a value and press submit')
])


@app.callback(
    dash.dependencies.Output('container-button-basic', 'children'),
    [dbc.Input('button', 'value')], )
def update_output(value):
    return 'The input value was "{}" and the button has been clicked {} times'.format(
        value, value

    )


if __name__ == '__main__':
    app.run_server(debug=True)

Above is my code and it gives an Incorrect Type Exception.

5

@supunsand

Your question is completely unrelated to the post and you should have made a new post regarding your problem.
Also you should definitely check out the dash user guide at https://dash.plot.ly

Anyways regarding your problem:

@app.callback(
    Output('container-button-basic', 'children'),
    [Input('button', 'n_clicks')],
    [State('input-box', 'value')]
)
def update_output(clicks, value):
    if clicks is None:
        raise PreventUpdate
    return 'The input value was "{}" and the button has been clicked {} times'.format(value, clicks)
1 Like
6

I’, a little confused how the html.I is getting your image. Is it in the className?

7

using html.I with n_clicks allows the button to have callback but doesnt actually trigger on click. Any idea why?