How to embed font-awesome icons into submit_tag

Question

Trying to user font awesome icons for my buttons but I cant get it to show in the submit_tag

 <%= submit_tag icon("search"), class: "btn-primary", style:"width:40px;" %>

output:

 <input class="btn-primary" name="commit" style="width:40px;" type="submit" value="&lt;i class='icon-search' style='font-size:1em' &gt;&lt;/i&gt;">

helper:

def icon(name, size=1)
  #icon("camera-retro")
  #<i class="icon-camera-retro"></i> 

  html = "<i class='icon-#{name}' "
  html += "style='font-size:#{size}em' "
  html += "></i>"
  html.html_safe
end

when I remove the html.html_safe line of the helper I get the same thing. its like html_safe is not working. I have also tried html = raw(html) with no effect either.

Answer 1

Input submit tags don't allow nested HTML, which you need to show an icon.

Try using a button instead:

<button class='btn btn-primary' style='width:40px;'>
  <%= icon("search") %>
</button>

It's worth noting some differences between the behaviour of button tags and input submit tags. Check out this SO question for a bunch of great details. I personally haven't had issues using button tags in my applications. YMMV with respect to different browsers and such, though.