Icon and HTML text on same line using DashIconify

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
    ),

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

Please see image and any help would be appreciated.

Thanks,
Charles

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'}
    ),
3 Likes