CODEWITHSUNDEEP
element-ui
Akshdeep Singh
Akshdeep Singh

Reputation: 1457

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.

Upvotes: 3

Views: 11427

Answers (3)

Riyaz
Riyaz

Reputation: 1

This worked for me.

HTML:

<el-button icon="el-icon-circle-plus-outline">Add</el-button>

CSS:

<style lang="less" scoped>
    /deep/ .el-icon-circle-plus-outline {
        font-size: 15px;
    }
</style>

Upvotes: 0

Петр
Петр

Reputation: 29

This works for me:

HTML

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

CSS

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

Upvotes: 0

dreijntjens
dreijntjens

Reputation: 4835

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

Upvotes: 11

Related Questions