Add icon to border button

Question

I would like help to represent this image with css. I do not know how to put that little orange ball on the left edge of the button.

.btn-typesTitleCreator {
    box-shadow: 0 2px 21px 0 rgba(255,114,1,0.51) !important;
    border: 1px solid #FF7201;
    height: 70px;
    border-radius: 12px;
}

<button type="button" class="btn-typesTitleCreator" id="createSmartTitle_button">Criar título inteligente</button>

IMG Example

Answer 1

Unicode Characters

Try using a unicode font character, I found 3 suitable ones by searching with keyword circle: here.. For each font there are several protocols to use a font character but there 2 we will concern ourselves with:

---

CSS

Use the CSS pattern as the content value in a pseudo-element as per Ori Drori's answer:

 button.css::before {  // ::before` is a pseudo-element<br>
    content: '\1f787'; //  content` is the CSS unicode
        ....
   }

---

HTML

Using HTML entities is far easier to use, but it depends on placing unicode in markup which done on a large scale would be tedious and hard to maintain.

button.html b { 
   ... 
  }
  <button><b>&#128903;</b></button>

---

Demo

html,
body {
  font: 400 16px/1.5 Cosolas
}

#display {
  width: 95%;
  border-collapse: collapse;
  padding: 15px;
}

th,
td {
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}

button.btn {
  box-shadow: 0 2px 21px 0 rgba(255, 114, 1, 0.51) !important;
  border: 1px solid #FF7201;
  height: 70px;
  width: 200px;
  line-height: 2;
  border-radius: 12px;
  display: table;
  margin: 10px;
  font: 700 16px/2 Verdana;
  position: relative;
}

button.css::before {
  content: '\1f787';
  font-size: 2rem;
  display: inline-table;
  position: absolute;
  left: -8%;
  top: 8%;
  color: rgba(255, 144, 0, 1);
}

button.html b {
  font-size: 2rem;
  display: inline-table;
  position: absolute;
  left: -8%;
  top: 8%;
  color: rgba(255, 144, 0, 1);
}

<table id='display'>
  <tbody>
    <tr>
      <th>Raw</th>

      <td>⭕</td>
      <td>🞇</td>
      <td>⦾</td>
    </tr>
    <tr>
      <th>HTML</th>
      <td><code>&amp;#11093;</code></td>
      <td><code>&amp;#128903;</code></td>
      <td><code>&amp;#10686;</code></td>
    </tr>
    <tr>
      <th>CSS</th>
      <td><code>\2b55</code></td>
      <td><code>\1f787</code></td>
      <td><code>\29be</code></td>
    </tr>
  </tbody>
</table>

<button class='btn css' type='button'>CSS Button</button><br>

<button class='btn html' type='button'>
<b>&#128903; </b>HTML Button</button>

Answer 2

Use a pseudo element (::before) with a border in the color that you want, and border-radius: 50% to make it round:

.btn-typesTitleCreator {
  position: relative;
  box-shadow: 0 2px 21px 0 rgba(255, 114, 1, 0.51);
  border: 1px solid #FF7201;
  height: 70px;
  border-radius: 12px;
  padding: 0 1em;
  margin: 1em;
}

.btn-typesTitleCreator::before {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 0;
  top: 50%;
  height: 10px;
  width: 10px;
  border: 5px solid #FF7201;
  border-radius: 50%;
  background: white;
  content: '';
}

<button type="button" class="btn-typesTitleCreator" id="createSmartTitle_button">
    Criar título inteligente
  </button>