[Question] How to use icons into the MazBtn or MazInput components

[kirangadiwaddar]

I tried adding the icons to the input and button. but the error 404. What's the solution for this..?

[LouisMazel]

Hi @kirangadiwaddar,

As you can see in the documentation here for MazInput or here for MazBtn, when you use the props left-icon, right-icon or icon (only for the fab one) like this:

<MazBtn left-icon="trash" right-icon="home">
  Text
</Mazbtn>

<MazBtn icon="trash" fab />

<MazInput left-icon="trash" right-icon="home" />

The components will load your own SVG files available in your public folder using the MazIcon component.

So, the values of prop are the name of your SVG file name located in the public folder.

Example:

public/
  - trash.svg
  - home.svg

If you want to set a custom path and put your icons into /public/icons for example you can do:

Vue

main.{ts,js}

import { createApp } from 'vue'
const app = createApp(App)

app.provide('mazIconPath', '/icons')

Nuxt

nuxt.config.{ts,js}

export default defineNuxtConfig({
  modules: ['maz-ui/nuxt'],
  mazUi: {
    defaultMazIconPath: '/icons',
  },
})

So, MazIcon component use the path /icons/ + name (in the prop) + .svg

---

You can use your own SVG files or if you want to use the maz-ui icons pack, you have to download it here and put the icons SVG files into your public folder or /public/your_custom_path if you use a custom path

With this "prop method", the icons SVG files should always be in the public folder

Using "slots method"

To avoid downloading the icons pack (and have better SSR support for Nuxt users), you can directly use the icons SVG files of maz-ui available in the folder maz-ui/icons of the dependency by using vite-svg-loader

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import svgLoader from 'vite-svg-loader'

export default defineConfig({
  plugins: [vue(), svgLoader()]
})

<template>
  <MazBtn left-icon="trash" right-icon="home">
    <template #left-icon>
      <TrashIcon />
    </template>
    Text
    <template #right-icon>
      <HomeIcon />
    </template>
  </Mazbtn>

  <MazBtn fab>
    <template #icon>
      <TrashIcon />
    </template>
  </MazBtn>

  <MazInput>
    <template #left-icon>
      <TrashIcon />
    </template>
    <template #right-icon>
      <HomeIcon />
    </template>
  </MazInput>
</template>

<script lang="ts" setup>
  /// <reference types="vite-svg-loader" />
  import TrashIcon from 'maz-ui/icons/trash.svg'
  import HomeIcon from 'maz-ui/icons/home.svg'
</script>

The list of available icons is here

---

Let me know if it's clear to you, then I will close this issue.

If it's not the case, or if you have any questions don't hesitate to ask me.

[kirangadiwaddar]

Hey @LouisMazel

Thanks for the solution, The mistake i was doing is not adding the path in the config file. Thank for the quick response :)