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

Question

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.

Answer 1

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;
}