If your initial code snippet was accurate, you won't find any siblings that can be styled using CSS.
Since the text content of your buttons is not selectable with CSS, the SVG icon will be both :last-child and :first-child.
You could try using JavaScript to add classes to your buttons:
let buttons = document.querySelectorAll('button');
buttons.forEach(function(button, i){
let icon = button.querySelector('svg');
let siblingLeft = icon.previousSibling.textContent;
// remove whitespace
siblingLeft = siblingLeft.replace(/\s/g, "");
let btnClass = siblingLeft ? 'icon-right' : 'icon-left';
button.classList.add(btnClass);
});
body{
font-size:2em;
}
button{
font-size:inherit;
background:#f4f4f4;
border: 1px solid #999;
padding:0.3em;
}
.icon{
display:inline-block;
height:1em;
margin-left:0.3em;
margin-right:0.3em;
position:relative;
bottom:-0.1em;
fill: blue;
}
.icon-right svg{
margin-right:0
}
.icon-left svg{
margin-left:0;
fill:orange;
}
<button>
<svg class="icon icon-inline" focusable="false" aria-hidden="true" viewBox="0 0 24 24">
<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM8.5 8c.83 0 1.5.67 1.5 1.5S9.33 11 8.5 11 7 10.33 7 9.5 7.67 8 8.5 8zM12 18c-2.28 0-4.22-1.66-5-4h10c-.78 2.34-2.72 4-5 4zm3.5-7c-.83 0-1.5-.67-1.5-1.5S14.67 8 15.5 8s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" /></svg>Placeholder left
</button>
<button>
Placeholder right<svg class="icon icon-inline" focusable="false" aria-hidden="true" viewBox="0 0 24 24">
<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM8.5 8c.83 0 1.5.67 1.5 1.5S9.33 11 8.5 11 7 10.33 7 9.5 7.67 8 8.5 8zM12 18c-2.28 0-4.22-1.66-5-4h10c-.78 2.34-2.72 4-5 4zm3.5-7c-.83 0-1.5-.67-1.5-1.5S14.67 8 15.5 8s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" /></svg>
</button>
I believe your existing UI design in CSS already includes classes for different types of icons or positions. (Make sure to provide an example of your button markup for a more precise answer).