Trouble using font-awesome-rails with a HAML file

Question

I am currently trying to change from an existing svg file in the following section of a HAML file:

.pokecon-btn-search-lg
   %i.btn.w100= image_tag "icons/search_white.svg", class: "pokecon-img-icon-search"
   %input.pokecon-btn-search-lg-submit{type: "submit", value: ""}

The goal is to switch over to the font-awesome search icon which is usually called into HTML by

<i class="fa fa-search" aria-hidden="true"></i>

The gem font-awesome-rails is installed, and called into application.css.scss via @import "font-awesome";

In order to start get the line into the HAML file, I was advised to create an image helper like so:

module  ImagesHelper
  def fa(name)
    return "<i class='fa #{name}' aria-hidden='true'></i>"
  end
end

This allowed me to change the HAML file into:

%i.btn.w100
  = fa 'fa-search pokecon-img-icon-search'
  %input.pokecon-btn-search-lg-submit{type: "submit", value: ""}

Unfortunately, this is just rendering the text <i class="fa fa-search pokecon-img-icon-search" aria-hidden="true"></i> on top of the button instead of the actual icon that is needed. I have tried restarting the rails server and running bundle install again just in case, but the issue persists.

I am not super confident with HAML files so I would not be surprised if I am heading in completely the wrong direction with things here!

Answer 1

Try it without the helper first, then work out how to get the HAML into the helper method later.

This ought to work:

%i.btn.w100
  .fa.fa-search.pokecon-img-icon-search{ "aria-hidden" => true }
  %input.pokecon-btn-search-lg-submit{ type: "submit", value: "" }