Google icons code#

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. 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. Through most of the examples in this kit, we have used the default Icons for the Material Design provided by Google. The span inside the button is 24 x 24, but the button content is not.Īs 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. The button and icon class have no special styles applied to them, other than a color change, but for some reason the content of the button is way taller than it's wide (24 x 29.xxx if I remember correctly, with a font size of 24 px). The second problem I have is that I used an icon for a button (the ligature way, since that's the only one that I got to work), and it's not quadratic.

Google icons code#

I tried &#xxxx just like in the example, with the code that's given under 'Code Point' for each icon in place of the x, but that doesn't work. However, I don't understand how these numeric character references work.

That's great and all, but since it apparently doesn't work in all browsers, I wanted to try the other method that's mentioned:įor browsers that do not support ligatures, fall back to specifying the icons using numeric character references So I'm using Google Icons on a website I'm writing, and I have two problems:Īs it says in the documentation right here, you can use a span element with the correct class and just put the icon name inside, and it'll work.