La cuestión

Ya sé cómo agregar viñetas de imagen usando el CSSbackground-image propiedad. Lo que intento hacer ahora es mostrar un pequeño ícono gráfico a la izquierda del número de línea en una lista ordenada.

El problema con el que me encuentro constantemente es que cuando trato de colocar la viñeta de imagen no se muestra en la pantalla. Puedo ver que está allí empujando la imagen a lo largo del eje X hacia la derecha, por lo que no sé qué no se muestra correctamente.

Nota: yopuede haga que el icono aparezca a la derecha del número, antes del texto, pero ese no es el resultado deseado.

Mi código

.action-item {
    background-image: url(https://cdn0.iconfinder.com/data/icons/clipboard-1/100/clipboard-10-512.png);
    background-position: -4px 2px;
    background-repeat: no-repeat;
    line-height: 1.5;
    background-size: 1.4em;
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    text-indent: 1.4em;
}

<ol>
  <li class="action-item">item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li class="action-item">item 4</li>
  <li class="action-item">item 5</li>
  <li>item 6</li>
</ol>

Lo que ya he probado

He intentado configurartext-indent, padding-left, margin-left, line-height, todo fue en vano.

Ideas que no he probadooverflow: hiddenz-indexMi pregunta

¿Es esto posible con CSS puro, y si es así, qué estoy haciendo mal?