Button icon and text in same line

I'm trying to set svg icon and text in a button in the same line but it's not working as I want in tailwind css. My code is given below:

<button className=" mr-72  px-6 pt-2.5 pb-2 bg-gradient-to-r from-yelloish to-pinkish text-white font-medium text-xs leading-normal  rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150  align-center h-11">
<svg width={24} display={"inline-block"} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 10v9a1 1 0 001 1h10a1 1 0 001-1v-9M6 10l6-6 6 6M6 10l-2 2m14-2l2 2m-10 1h4v4h-4v-4z"></path> </g></svg>      
      {props.text}</button>

Picture is given below: https://u.pcloud.link/publink/show?code=XZS2LgVZEAj4sDEqNuHqHXoxRNjT9p9iwhGk