[SOLVED] Make feather icon and text vertically aligned to the middle

Make feather icon and text vertically aligned to the middle

Code to my HTML page - https://jsfiddle.net/ghemachandra94/5rfymwgc/4/

I am trying to align the text beside the icon to middle of the icon, but no luck with the styles display: flex and/or vertical-align: middle

Need help in getting both of them aligned to the middle

.feather-props {  
  padding: 7px 10px 9px 10px;
  padding-left: 23px;
  background: transparent;
  text-decoration: none;
  display: flex;
  width: 100%;
  vertical-align: middle

<html lang="en">
  <title></title>
  <script src="https://unpkg.com/feather-icons"></script>
  <body>

    <a class="feather-props">
      <i data-feather="circle"></i>Circle
    </a>

    <script>
      feather.replace()
    </script>
  </body>
</html>

}

Solution

Replace vertical-align: middle with align-items: center in .feather-props:

feather.replace()

.feather-props {  
  padding: 7px 10px 9px 10px;
  padding-left: 23px;
  background: transparent;
  text-decoration: none;
  display: flex;
  width: 100%;
  align-items: center;
}

<script src="https://unpkg.com/feather-icons@4.28.0/dist/feather.min.js"></script>

<a class="feather-props">
  <i data-feather="circle"></i>Circle
</a>