How to include an icon in a submit input of HTML

In this article we are going to learn how to include an icon in a submit input of HTML forms, with a somewhat unusual and easy technique.

Hey you programmer, ok? Let’s learn how to insert icons into inputs!

Firstly, it is necessary to clarify that it is not so practical to add an icon to an input tag, as they do not support internal HTML manipulation.

That is, we cannot add new elements inside an input tag

So we run this technique by making a small change, the input would be a submit type button

And the button tag accepts HTML so we can insert an icon inside and do any submit with icon

First we need to import the icon library in our head tag:

<head>
 <title>Icon in a submit input</title>
 <meta charset="utf-8">
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"> 
</head>

See the example:

<form>
 <div>
  <input type="text" name="name" placeholder="Insert your name">
 </div>
 <div>
  <button type="submit">Send<span class="material-icons">send</span></button>
 </div>
</form>

This is the HTML of our example and you can see that we have already solved the problem:

But let’s make some adjustments to the CSS to make the form more professional:

body {
 margin: 50px;
 font-family: Helvetica;
}

div {
 margin: 20px;
}

input {
 padding: 5px 15px;
 width: 280px;
 box-sizing: border-box;
}

button {
 background-color: lightblue;
 color: #FFF;
 border: none;
 height: 30px;
 line-height: 30px;
 width: 140px;
 position: relative;
 cursor: pointer;
}

span.material-icons {
 font-size: 18px;
 position: absolute;
 right: 15px;
 top: 6px;
}

And so we have a simulation similar to some forms that use the icon-in-input technique, see: