So I'm using 
As you can see, when inspected, there's some more space underneath the plus than above it, which makes the button not quadratic as I would like it. I already tried changing the line height property to 1, and while that does reduce the space at the bottom, it's still not even. And I didn't even set the line height anywhere else, so I was surprised that it had any effect, because I thought 1 would be the standard.
button {
line-height: 1;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link href="https://fonts.googleapis.com/icon?family=Material Icons"
rel="stylesheet">
</head>
<body>
<button type="button">
<span class="material-icons">add</span>
</button>
</body>
</html>Just highlight the button text and you'll see it.
CodePudding user response：
To make an element as square you can use aspect-ratio: 1 / 1;
To center the icon within the button you can use flexbox:
/* makes the button square */
button {
aspect-ratio: 1/1;
}
/* cenetrs the icon horizontally and vertically */
button {
display: flex;
align-items: center;
justify-content: center;
}<!-- Head -->
<link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
<!-- Body -->
<button type="button">
<span class="material-icons">add</span>
</button>CodePudding user response：
The answer from @tacoshy seems to cover the first part of your question.
For the second part - using a code insted of the name of an icon - you need to use exactly the layout given in the google documentation. Note that they have an x after the # - this indicates to the HTML 'special characters' system (ie starting with an ampersand) that the following code is in hexadecimal.
So for the add sign you need to use: 