Changing Icon Position in Button

Hi!

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"

                iconF7="checkmark_circle"

                onClick={() => {

                  

                }}>

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

        </Button>

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.