[element] Modify the icon style of the step

The step bar component is very clear for process-oriented events, but the official website provides few styles. If you want to use your own icon, how to achieve it

Modify content

1. The size of the icon
2. The display of the icon inside the icon

specific code

html

<el-steps :space="250" finish-status="success">
              <el-step title="吃饭" status="success"></el-step>
              <el-step title="听歌" status="wait" icon="el-icon-service"></el-step>
              <el-step title="打电话" status="finish" icon="el-icon-phone-outline"></el-step>
              <el-step title="打游戏" status="error"></el-step>
              <el-step title="睡觉" status="process" icon="el-icon-warning">
                <!-- <i icon="el-icon-loading"></i>  内部icon不好使--> 
              </el-step>
            </el-steps>

css (monitoring the page will find that when there is no icon, the style name of el is is-text, but instead, the style name is is-icon, so first modify the external style, and then copy it)

.el-step__icon.is-text {
    
    
  border-radius: 50%;
  border: 4px solid;
  width: 50px;
  height: 50px;
  border-color: inherit;
}
.el-step__icon.is-icon {
    
    
  border-radius: 50%;
  border: 4px solid;
  width: 50px;
  height: 50px;
  border-color: inherit;
}