el-button 自定义图标

你可以通过在 el-button 中使用 el-icon 组件来自定义图标。具体方法如下：

1. 在 el-button 组件中使用 el-icon 组件，并设置 icon-class 属性来指定图标的样式名。

例如：

<el-button>
  <el-icon class="el-icon-search"></el-icon>
  搜索
</el-button>

其中，class 属性值 "el-icon-search" 为 Element UI 内置的图标样式名，你也可以自定义样式名。

2. 如果你想使用自己的图标，可以在 el-icon 组件中使用 font-family 属性来设置自定义图标的字体。

例如：

<el-button>
  <el-icon class="my-icon" :style="{ fontFamily: 'myfont' }"></el-icon>
  自定义图标
</el-button>

其中，class 属性值 "my-icon" 为自定义图标的样式名，:style 属性用来设置字体，myfont 为自定义字体的名称。你需要在样式表中定义该字体，以及相应的图标样式。

希望这个回答对你有帮助。

相关问题

el-button添加自定义图标

可以通过在 el-button 标签中添加 icon 属性来实现添加自定义图标。例如，如果要添加一个名为 my-icon 的自定义图标，可以使用以下代码：

<el-button icon="my-icon">按钮</el-button>

在样式中，需要定义 my-icon 类来指定使用的图标，例如：

.my-icon {
background-image: url('path/to/my-icon.png');
/* 其他样式 */
}

记得将路径替换为实际图标的路径。

el-textarea自定义添加图标

`el-textarea`是Element UI库中的一个组件，它是一个用于编辑文本的区域，通常用于长文本输入。如果你想在`el-textarea`上自定义添加图标，可以通过CSS或者将图标包装在一个可以点击的元素（如`<i>`、`<button>`等），并将其放置在`el-textarea`的外部来实现。例如：

<template>
  <div>
    <el-textarea v-model="text" placeholder="请输入内容"></el-textarea>
    <button @click="addIcon">点击添加图标</button>
    <i class="custom-icon" :style="{ visibility: showIcon ? 'visible' : 'hidden' }">
      <!-- 按需替换为实际的图标，如使用Font Awesome： -->
      <fa-icon :icon="yourCustomIcon" />
    </i>
  </div>
</template>

<script>
import { ElButton, FaIcon } from "element-plus";
import "font-awesome/css/font-awesome.min.css";

export default {
  components: {
    ElButton,
    FaIcon,
  },
  data() {
    return {
      text: "",
      showIcon: false,
      yourCustomIcon: 'fas fa-paperclip', // 可更改为你想要显示的图标名
    };
  },
  methods: {
    addIcon() {
      this.showIcon = !this.showIcon; // 显示或隐藏图标
    },
  },
};
</script>

<style scoped>
.custom-icon {
  position: absolute;
  right: 10px; /* 根据需要调整位置 */
}
</style>

在这个例子中，当你点击按钮时，会切换`custom-icon`的可见性。你可以根据需求调整样式和图标。