How to add a font awesome icon in the submit button in Flask Wtform?

user_10551444 0
Viewed 821

I saw this question everywhere and I tried it all.

I have a web appli made with Python Flask and Wtform.

I simply want to add an icon :

<i class='mdi mdi-arrow-right-bold-circle ml-2'></i>

in my submit button.

This is my code:

class NewCampaignForm(FlaskForm):
    
    name = StringField('Name of your campaign', validators=[DataRequired(), Length(min=2, max=100)],render_kw={"placeholder": "i.e. : Cold messaging to small businesses..."})
    submit = SubmitField('Next<i class="mdi mdi-arrow-right-bold-circle ml-2"></i>')

I tried Markup:

from markupsafe import Markup
submit_value = Markup ('Next<i class="mdi mdi-arrow-right-bold-circle ml-2"></i>')
submit = SubmitField(submit_value)

enter image description here

It didn't work. It always show the html code as label instead of rendering it as HTML and display icon.

I've seen there was another Markup from jinja2:

from jinja2 import Markup

It didn't work either :-(

Do you have any idea how to display this icon in my submit button?

flask-wtforms flask python-3.x
1 Answers

You can't put HTML into the submit button even with Markup, because WTForms will render the button value you passed as a value attribute:

<input id="submit" name="submit" type="submit" value="Next<i class="mdi mdi-arrow-right-bold-circle ml-2"></i>">

In your case, you can just write plain HTML for submit button instead of use WTForms's submit field in the template:

<form method="post">
{{ form.name() }}
<button type="submit">Next<i class="mdi mdi-arrow-right-bold-circle ml-2"></i></button>
</form>
user_55118490
Related