How to add icon to addButton?

[Thatoo]

Hello,

Here is an extract from my code (full code available here : https://github.com/Thatoo/picker/blob/one_page/src/main.js ) :

import EyeIcon from '@mdi/svg/svg/eye.svg?raw'
import PencilIcon from '@mdi/svg/svg/pencil.svg?raw'
import InternalIcon from 'vue-material-design-icons/OpenInNew.vue'

function openFilePickerClipboard() {
    const filePicker = getFilePickerBuilder(t('picker', 'Choose a file you want to copy a link from'))
        .setMultiSelect(false)
        .allowDirectories(true)
        .addButton({
            label: t('picker', 'Copy Read Only public link'),
            callback: (nodes) => {
                const target = nodes[0]
                const targetPath = target.path
                const permission = 'read'
                createPublicLink(targetPath, permission, 'copy')
            },
            type: 'primary',
            icon: EyeIcon,
        })
        .addButton({
            label: t('picker', 'Copy Editable public link'),
            callback: (nodes) => {
                const target = nodes[0]
                const targetPath = target.path
                const permission = 'write'
                createPublicLink(targetPath, permission, 'copy')
            },
            type: 'primary',
            icon: PencilIcon,
        })
        .addButton({
            label: t('picker', 'Copy Internal link'),
            callback: (nodes) => {
                const target = nodes[0]
                const targetId = target.fileid
                copyInternalLink(targetId)
            },
            type: 'success',
            icon: InternalIcon,
        })
        .build()
    filePicker.pick()
}

It builds but none of the three icons are displayed when loading the page :

[Thatoo]

I tried to import svg like that also but it didn't help :

import EyeIcon from '../img/eye.svg'
import '../img/pencil.svg?raw'
import '../img/open-in-new.svg'

[Thatoo]

So, this works import EyeIcon from '@mdi/svg/svg/eye.svg?raw' but it requires to add something like

const webpackConfig = require(' Nextcloud /webpack-vue-config')
webpackConfig.module.rules.push({
    resourceQuery: /raw/,
    type: 'asset/source',
})

in the webpack.config.js or webpack.js file. Source : https://github.com/nextcloud-libraries/webpack-vue-config/tree/main?tab=readme-ov-file#replaceedit-existing-rule

[Thatoo]