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 Like so, But to make it work. Answer 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

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

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

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>

Advertisement

Answer