Add html icon in button value - html

Question

<input type="submit" id="appCreate" name="Reds" value="Reds" formaction=#Url.Action("") formmethod="post" class="btn btn-success btn-block" onclick="javascript: return SubmitForm(this);" />
CSS -
.reddot {
content: "\25cf";
font-size: 1.5em;
color: red;
}
I want to add <span class="reddot"></span> to the value of my button (it just creates a red dot icon). So the value of my button shown is Reds<red dot icon>
How can I do this?

Answer 1

Instead of content: "\25cf"; Try background: url('xyz.png');

Answer 2

<input> elements are considered void elements, therefore they cannot contain children. You could use a <button> element, but personally I'd discourage this method because the HTML spec deems it invalid.
One possible solution is to wrap the button in a container. That container could have a pseudo-element (::after) that places the red dot for you.
.reddot {
display: inline-block;
position: relative;
}
.reddot > input[type=submit] {
text-align: left;
padding-right: 20px; /* Add padding to make space for the dot */
}
.reddot::after { /* Place an element inside of .reddot */
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%); /* Center it vertically */
right: 5px; /* 5px off the right edge */
content: "\25cf";
font-size: 1.5em;
color: red;
pointer-events: none; /* Make sure the dot doesn't block the button */
}
<div class="reddot">
<input type="submit" />
</div>
<div class="reddot">
<input type="submit" value="Here's another button with a red dot!" />
</div>