Is it possible to insert an SVG as value into an input tag?

Question

I have the button below and what I want is that instead of the name "Go", I can use an image, be it in SVG or even something from Font Awesome. How to proceed in that case?

From now on, thank you!

input {background:#B80000; color:#fff; font-size:13px; height:27.7px!important; margin:0 3px; width:15%; font-family:Segoe UI; text-transform:uppercase; border:none}

<input class='follow-by-email-submit' type='submit' value='Ir'/>

Answer 1

On a button using input you won’t get it. Instead of input, use button, because it supports other types of elements.

So you can use font-awesome to include an icon to the button:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<button class='follow-by-email-submit'>
    <i class="fa fa-arrow-right"></i>
</button>

Or you can use any image:

<button class='follow-by-email-submit'>
   <img height="30" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" />
</button>

And you don’t have to include the attribute type="submit" at the button. By default he’s already the type submit.

Answer 2

Edit: Another option, which by the way is even more semantic, would be to put the SVG in the <label>, doing so:

label {
  position: relative;
}

label:before {
  content: "";
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill-rule='evenodd'%3E%3Cpath d='M16.036 18.455l2.404-2.405 5.586 5.587-2.404 2.404zM8.5 2C12.1 2 15 4.9 15 8.5S12.1 15 8.5 15 2 12.1 2 8.5 4.9 2 8.5 2zm0-2C3.8 0 0 3.8 0 8.5S3.8 17 8.5 17 17 13.2 17 8.5 13.2 0 8.5 0zM15 16a1 1 0 1 1 2 0 1 1 0 1 1-2 0'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
}

input {
  padding: 10px 30px;
}

<label>
  <input type="button" value="Entrar">
</label>

---

I’m going to give a different answer to what you have in the question marked as duplicate, because I believe it will suit you better.

First for knowledge: It is not all <input> accepting pseudo element ::after and ::before as you can see in this question. Pseudo elements ::after and ::before work on which input types

So for example I’ll use the <button>

Now the technique using the content of the pseudo element ::after to place the symbol of Font Awesome whatever you want.

See the example below:

.awesome {
    position: relative;
    padding: 10px;
    background-color: brown;
    width: 100px;
    height: 40px;
    border: none;
    cursor: pointer;
}
.awesome::after {
    content: "\f00c";
    font-family: FontAwesome;
    color: #fff;
    font-size: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 250ms ease-in-out;
}
.awesome:hover::after {
    font-size: 24px;
    content: "\f1b9";
    font-family: FontAwesome;
}

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<button class="awesome"></button>

OBS1: To use the Font Awesome in the content:"" you need to use the Unicode value of the character, if using the default Font Awesome class will not work.

Answer 3

You can use IMG inside the TAG button:

<form name="sender" method="get">
    <button><img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/x11.svg" /></button>
</form>

If BUTTON does not work as SUBMIT can use JAVASCRIPT:

<button onclick="document.sender.submit()"><img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/x11.svg" /></button>

If it is a SVG designed by HTML:

<button><svg width="64" height="64">
  <circle cx="32" cy="32" r="20" stroke="green" stroke-width="2" fill="yellow" />
</svg></button>

Remember that the X and Y position of the circle has to be half the width and height of the SVG to center, R being its dimensional size.