Is there any way for replace the "Dowload" text with custom icon?

[Howard0401]

Umm... I would like to use a "custom" icon for download link, but didn't find an efficient solution.

import QRCode from 'vue3-qr-code-styling'

<QRCode 
ButtonName="proper length as my logo"
>
</QRCode>

I tried

1. turn the class my-button font color to be same as background color.
2. use background-image as my custom image.

.my-button {
  background-image: url('../assets/logo.png'); <- this is my icon
  background-repeat: no-repeat;
  margin-top:1rem !important; 
  margin-left:1rem !important; 
  background-size: 20px 20px;
  font-size: 20px;
  color:white;
}

It seems to work, but it shouldn't be the correct solution, maybe there is better way?

BTW, any possible for support tailwind css in myclass and downloadButton ?

[diadal]

check this downloadButton is for button class so you can :downloadButton="my-button"

<div v-if="imageUrl" :class="myclass">
      <img :src="imageUrl" :class="imgclass" />
    </div>
    <div v-if="download">
      <button @click="onDownloadClick" :class="downloadButton">
        {{ ButtonName }}
      </button>
      <br />
      <br />
    </div>
  </div>

[Howard0401]

Thanks for your speedy reply! And there is no image attribute binding option like below?

 <img :src="buttonOption" />