Icon and HTML text on same line using DashIconify

Dash Python
1

Hi All,

I have text that will appear on the right side of the HTML screen. I would like to have a Dashiconify icon to the left of that text but nothing I do allows me to place the icon to the left of text while keeping both items to the right of the page. Wondering if anyone knows how to do this and wouldn’t mind helping?

My code:

app.layout = html.Div(children=[

    html.Div(children=[
    html.H4(children=dow + ", " + d2),
    html.I(DashIconify(
        icon = "icomoon-free:alarm",
        width = 30, 
        inline = True,
        style = {'display': 'inline', 'float': 'right'},),),            
        html.H4(children="testing", style = {'text-align': 'right'},),

    html.Div(id='live-update-time'),
    dcc.Interval(
        id='interval-component',
        interval=1*1000, 
        n_intervals=0
    ),

dash
dash805×698 51 KB 

], style={'textAlign': 'left'}),

Please see image and any help would be appreciated.

Thanks,
Charles

2

Hi @Chas and welcome to the Dash community :slightly_smiling_face:

Give this a try to start - then add style as needed:

    html.Div(
        [
            html.I(DashIconify(icon="icomoon-free:alarm")),
            html.H2("Testing", style={"display": "inline"})
        ],
        style = { 'float': 'right'}
    ),
4 Likes