Como adicionar um ícone SVG em uma entrada?

Preciso colocar ícones nas entradas para criar um novo usuário. Provavelmente é uma tarefa muito fácil para alguém que conhece o caminho do código de front-end. No entanto eu não. Aqui está o wireframe e depois mostro meu código.

WIREFRAME

Como você pode ver. Existem ícones no lado esquerdo das entradas. No momento, tenho os SVGs no meu diretório e pronto para usar, só preciso saber como colocá-los na entrada. Aqui está o código para o formulário

FORMATO
<label clas="name-label">
  <%= f.text_field :name, placeholder: "Name", class: "form-labels" %>
</label>

<label class="email-label">
  <%= f.text_field :email, placeholder: "Email", class: "form-labels" %>
</label> 

Então, eu tenho o espaço reservado com uma string que atualmente apenas imprime essa string. Eu preciso colocar os ícones dentro do que eu acho? Aqui está o CSS que tenho para os ícones.

CSS
.icon-email {
  background-image: image-url('email-field.svg');
}

.icon-name {
 background-image: image-url('name-field.svg');
}

Existe uma maneira de colocar essas classes no espaço reservado?

questionAnswers(4)

yourAnswerToTheQuestion