Can a input type="submit" button have an HTML label?

Question

Can you put a tag, to be specific (ion icons) tag to an input type submit value?

I got these 2 tags and I need to combine them

<input type="submit" name="plus" value="" class="btn">
<ion-icon name="chevron-forward-outline"></ion-icon>

Like so, But to make it work.

<input type="submit" name="plus" value="<ion-icon name="chevron-forward-outline"></ion-icon>" class="btn">

Answer 1

Not with <input type='submit' ...> , as HTML labels aren't supported this way. From <input type="button"> MDN page :

Note: While <input> elements of type button are still perfectly valid HTML, the newer <button> element is now the favored way to create buttons. Given that a <button> 's label text is inserted between the opening and closing tags, you can include HTML in the label, even images.

As such, with the functionally-same <button> you can have HTML labels:

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script> <button type="submit" name="plus" value="" class="btn btn-primary"> <ion-icon name="chevron-forward-outline"></ion-icon> </button>

Answer 2

use button tag

<button name="plus"  class="btn">
  <ion-icon name="chevron-forward-outline\"></ion-icon>
</button>

Answer 3

Create a fake field, take a look:

 .field { align-items: center; border: 1px solid #ccc; border-radius: .25rem; display: flex; } .field__input { appearance: none; border: 0; flex-grow: 1; padding: .5rem; } .field__icon { padding-right: .5rem; }

 <script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script> <div class="field"> <input class="field__input" type="text"> <span class="field__icon"> <ion-icon name="chevron-forward-outline"></ion-icon> </span> </div>