Icon not display when use in button :icon

[ntgraph]

el-icon works fine. but when use in el-button :icon, Icon does not display

[jw-foss]

@ntgraph Could you please share your use case? So that we can help debugging.

[wushupeng]

export default defineComponent({ components: { Search, }, })

icon does not display

[ntgraph]

Use like this will work in template: `

in script import { Edit } from '@element-plus/icons'; export default { name: 'Home', components: { Edit, }, }`

Case 1: I try to use like this below, (combine with the code above, it display the round button, but no icon in it

Case 2: the whole template has this button like this

compliation will complain that declared component is not used, do not import in script, so I end up remove the lines in the script, and let only the line of button in template. There is no display either. Am I missing something

so both case leads to :icon, not working. Please help

[QMZhao]

Use like this will work in template: <el-icon :size="20"> <edit /> </el-icon> in script import { Edit } from '@element-plus/icons'; export default { name: 'Home', components: { Edit, }, }

Case 1: I try to use like this below, (combine with the code above, it display the round button, but no icon in it

Case 2: the whole template has this button like this

compliation will complain that declared component is not used, do not import in script, so I end up remove the lines in the script, and let only the line of button in template. There is no display either. Am I missing something

so both case leads to :icon, not working. Please help

This is how I use it

<el-button type="primary">
    <el-icon style="vertical-align: middle;">
    <search />
  </el-icon>
  <span style="vertical-align: middle;"> Search </span>
</el-button>

[chenguzhen87]

I have the same promblem

[chenguzhen87]

script setup 下是可以的

[icksky]

I have the same promblem

你需要在 return 那边把 ICON 返回出去, 不是写在 components 里面

[chenguzhen87]

在setup函数中返回return

{
Search,
  Edit,
  Check,
  Message,
  Star,
  Delete,
}

正常

问题：components不能注册组件原因是啥？我用自己写组件注册是正常的呢

[sxzz]

This issue seems to be outdated, so I close it. If you have other problem, please create a new issue.

[JBtje]

If you want to stick with the old syntax and use :icon, you need to provide the template as a variable:

<template>
    <!-- Using Close as vue template -->
    <el-button>Close btn <el-icon><Close/></el-icon></el-button>

    <!-- Using :icon -->
    <el-button :icon="Delete">Remove</el-button>
</template>

<script>
import {shallowRef}    from 'vue';
import {Delete, Close} from '@element-plus/icons-vue';

export default {
    components: {
        Close,
    },

    data() {
        return {
            Delete: shallowRef( Delete ),
        };
    },
};
</script>

The shallowRef is required to prevent some overhead.

Or use the syntax recommended for vue 3.2+

<template>
    <!-- Using Close as vue template -->
    <el-button>Close btn <el-icon><Close/></el-icon></el-button>

    <!-- Using :icon -->
    <el-button :icon="Delete">Remove</el-button>
</template>
<script setup lang="ts">
import {Delete, Close} from '@element-plus/icons-vue';
</script>