Prepend or append icon in field of django-crispy-forms

Question

I have the following field in a Form:

<div class="form-group ">
 <div class="input-group">
  <input class="form-control" id="To" name="To" placeholder="To" type="text"/>
  <i class="glyphicon glyphicon-map-marker form-control-feedback"></i>
 </div>
</div>

which looks like

and I am trying to have a similar result using crispy-forms.

I tried

self.helper.layout = Layout(
            Fieldset(
                'Title',
                PrependedText(
                    'From',
                    <i class="glyphicon glyphicon-map-marker"></i>
                    ),
                'To',
                'Date',
                ButtonHolder(
                    Submit('submit', 'Search', css_class='button white')
                )
            )
        )

but I get a SyntaxError: invalid syntax.

Is it possible to add an icon as PrependedText in crispy-forms? If not, is there any alternative?

(Edit)

Trying

self.helper.layout = Layout(
                        Field(PrependedText('From', HTML('<span class="glyphicon glyphicon-map-marker"></span>')), placeholder='From'),
                        'To',
                        'Date',
                        ButtonHolder(
                            Submit('submit', 'Search', css_class='button white')
                        )
                    )

does not raise any error, but no icon is shown.

Answer 1

An alternative to using glyphicons would be using similar unicode symbols:

self.helper.layout = Layout(
            Field(PrependedText('From', '&#x1f4cc'), placeholder='From'),
            Field(PrependedText('To', '&#x1f4cc'), placeholder='To'),
            Field(PrependedText('Date', '&#x1f4c5'), placeholder='Date'),
            FormActions(ButtonHolder(Submit('submit', 'Search', css_class='btn btn-primary')))
        )

Problem here is that placer holder is for some reason not working...

Note also that appending '︎' to the unicode symbols to force that it is not rendered to emojis, as suggested here, does not seem to work.

Answer 2

self.helper.layout = Layout(
   Div(HTML('''
       <div class="input-group"> 
         <input class="form-control" id="To" name="To" placeholder="To" type="text"/>
         <i class="glyphicon glyphicon-map-marker form-control-feedback"></i> 
       </div>'''), 
      class="form-group") 

Answer 3

just use django's mark_safe helper like this:

from django.utils.safestring import mark_safe
Field(PrependedText('From',
                    mark_safe('<span class="glyphicon glyphicon-map-marker"></span>')),
      placeholder='From')

Answer 4

This works with placeholders:

self.helper = FormHelper()
self.helper.form_show_labels = False

self.helper.layout = Layout(
    Field(
        PrependedText('email',
                      mark_safe('<span class="glyphicon glyphicon-envelope"></span>'),
                      placeholder=_("Enter Email"), autofocus="")
    ),
    Field(
        PrependedText('name',
                      mark_safe('<span class="glyphicon glyphicon-user"></span>'),
                      placeholder=_("Enter Full Name"))
    ),