Aligning icon and text inside button

Asked Jun 25 '20 at 22:05

Active Jun 25 '20 at 22:13

Viewed 777 times

I have a button with an icon inside. Currently the icon and the text inside the button aren't aligned at all.

How can I fix this so it looks nice?

.download-button{
  color: #fff;
  background-color: #43a047;
  border: none;
  border-radius: 5px;
}

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Material+Icons" />
                    
<button class="download-button" type="submit"><i class="material-icons">cloud_download</i>Download</button>

asked Jun 25 '20 at 22:05

GTA.sprx

vertical-align: middle; to the icon or any custom value if it's not good – Temani Afif Jun 25 '20 at 22:10
`.material-icons {vertical-align: middle;}` add to your `css` – Jun 25 '20 at 22:24

Aligning icon and text inside button

0 Answers0