element-ui

Element-UI: How to increase icon size of buttons?

I am simply showing a button like this:

<el-button plain circle icon="el-icon-refresh"></el-button>

But the icon inside the button is too small. Is there a way to enlarge the icon only? I am using Vue.js for my project.

Solution

  • Element-ui doesn't support this by it's API. However the icon attribute places a class on i-element within a button. you are able to add a second class and add you own styling.

    <el-button plain circle icon="custom-icon el-icon-refresh"></el-button>

    CSS:

    .custom-icon {
   font-size: 2rem;
}