如何在framework7中的按钮中添加图标？

Question

I'm a beginner with framework7. I'm trying to insert an icon in a button element. I'd like to set the icon on the left of the label. I've achieved my purpose partially.

   <a class="button button-fill button-round button-small color-   gray" href="#"  id="add_field_button" style="float: left;"><i class="material-icons ">add_circles</i>Add</a>

I've put a demo here.

https://jsfiddle.net/ad72krqv/1/

Thank you in advance

Answer 1

Add this CSS

.button {
    display: flex;
    justify-content: center;
    align-items: center;
}
.button > i {
    width: 24px;
    margin-right: 5px;
}

JSFiddle Link of working demo