Custom icon in Button

[DrxcoDev]

Description

Question

I'm trying how I can add a custom icon as a button icon. The code I have is this:

<UButton
          style="margin-left: 38px;"
          icon="i-heroicons-pencil-square"
          size="sm"
          color="red"
          square
          variant="solid"
        />

[noook]

UButton exposes two slots https://ui.nuxt.com/components/button#slots

You can use either of them to provide your custom icon, if it is not part of an Iconify collection, as mentioned in the documentation: https://ui.nuxt.com/getting-started/theming#icons

If your icon is an image, you could then use an image within the leading slot.

<UButton
  style="margin-left: 38px;"
  size="sm"
  color="red"
  square
  variant="solid"
>
  <template #leading>
    <!-- Your custom icon here -->
  </template>
</UButton>

[DrxcoDev]

@noook Can I use an SVG for the custom button with the leading option? How?

[noook]

The exact same way you would use an svg in regular HTML.

[DrxcoDev]

@noook Ok, thanks.

[noook]

@DrxcoDev You can also define your own collection in your nuxt.config.ts, as per the documentation https://ui.nuxt.com/getting-started/theming#custom-config

The relevant code would be:

export default defineNuxtConfig({
  ui: {
    icons: {
      // might solve stretch bug on generate, see https://github.com/egoist/tailwindcss-icons/issues/23
      extraProperties: {
        'mask-size': 'contain',
        'mask-position': 'center'
      },
      collections: {
        foo: {
          icons: {
            'arrow-left': {
              // svg body
              body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />',
              // svg width and height, optional
              width: 24,
              height: 24
            }
          }
        },
        ...getIconCollections(['heroicons', 'simple-icons'])
      }
    }
  }
})

Then, you could use your in your vue file:

<UButton
  style="margin-left: 38px;"
  size="sm"
  color="red"
  square
  icon="i-foo-arrow-left" // i-{collection}-{iconName}
  variant="solid"
/>