Make font-awesome icon on button not clickable
You can use CSS to disable pointer events on the icon.
<button type="button" class="btn pull-right rotate-picture-right" aria-label="Rotate" id="picture{{ picture.pk }}"> <i class="fa fa-repeat" style="pointer-events:none" id="testright" aria-hidden="true"></i> </button>However, a better way to handle this would be to ensure that the event.target is the same as the event.currentTarget in your click event handler. You can always get the reference of the button and not the icon by looking at the event.currentTarget property. The property name might be different based on whether you are using vanilla JS or a framework like jQuery.
Sample:
$('button').click(function(e) { console.log(e.currentTarget); // This will be the button even if you click the icon })Handy reference for different Event Targets