How to set Heroicon icon on top of button background image with Vue 3 and TailwindCSS

Question

I am attempting to set a Heroicon icon on top of an button background image in Vue 3 and TailwindCSS. I created a circular button component containing a button with a background image and a slot for Heroicon icons:

<!--ButtonComponent-->

  <div>
    <button type="button" class="relative rounded-full">
        <img :src="https://image.shutterstock.com/image-illustration/abstract-vector-blue-color-geometric-260nw-167535434.jpg">
        <slot class="absolute"></slot>
    </button>
  </div>

I then imported that button component into another component, then wrapped that button around an imported Heroicon icon:

<!--ParentComponent-->

<div>
  <ButtonComponent>
     <VideoCameraIcon />
  </ButtonComponent>
</div>

import { VideoCameraIcon } from '@heroicons/vue/outline'

My goal is to configure the slot handling the Heroicon icon to sit on top of the button background image. To handle this, I added a TailwindCSS relative property to the button, and an absolute property to the slot. However, this still doesn't work. How can I go about enabling the slot element to sit on top of image (in order to display the Heroicon icon on the image)?

Answer 1

slot tag doesn't take class attribute in consideration, you should use the :slotted pseudo-class inside a scoped style:

<div>
  <ButtonComponent>
     <VideoCameraIcon class="btn-icon" />
  </ButtonComponent>
</div>
<script >
import { VideoCameraIcon } from '@heroicons/vue/outline'
....
</script>
<style scoped>
:slotted(.btn-icon) {
  @apply absolute
}
</style>