Changing Icon Position in Button


I am trying to position an Icon to the left of the text of a button but don’t seem to get it done.
How can I do it? This is my code right now

<Button text="PAY $10"

                className="button button-raised button-large button-primary"


                onClick={() => {



              {/* <Icon icon="f7-icons" slot="media">checkmark_circle</Icon>   */}


I have commentend the way I thought it would work, but it does not work.

Any help appreciated!

Did not use the Icon prop for the button, instead used the , then wrapped the text from the button in a span. Then wrapped them both inside a div and used flexbox.