O problema

Eu já sei como adicionar marcadores de imagem usando o CSSbackground-image propriedade. O que estou tentando fazer agora é exibir um pequeno ícone gráfico à esquerda do número da linha em uma lista ordenada.

O problema que continuo enfrentando é que, ao tentar colocar o marcador de imagem, ele não aparece na tela. Percebo que ela está lá, empurrando a imagem ao longo do eixo X para a direita, para que eu não saiba o que não está sendo exibido corretamente.

Nota: Ipode faça com que o ícone apareça à direita do número, antes do texto, mas esse não é o resultado desejado.

Meu 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>

O que eu já tentei

Eu tentei configurartext-indent, padding-left, margin-left, line-height, Tudo em vão.

Ideias que não tenteioverflow: hiddenz-indexMinha pergunta

Isso é possível com CSS puro e, se sim, o que estou fazendo de errado?