I am successfully displaying an icon in my app, the account_circle icon, using Angular Material 2.0.0-beta.3, like this:
<md-icon>account_circle</md-icon>
I have included <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> in my app.
However, none of the recommended ways of increasing the size of the icon using the md classes seem to work. How do I change the size without resorting to a font size? And how can I change the color to be the same color as the input box placeholders?
Update
Ok, I've got the icon changing size by applying the font size directly to the icon itself, like this:
<div fxFlexAlign="center"><md-icon style="font-size:48px;">account_circle</md-icon></div>
However, now I have the problem that the icon is not completely centered — it looks like it's using a single quadrant of the image to calculate the centering so is not quite right. What is the best way to center an enlarged Material icon like this?
You'll have to set the size of the md-icon, not only the font-size :
<md-icon style="font-size:48px; width: 48px; height:48px;">
or create a new class:
<md-icon class="md-48">
.md-48 {
font-size:48px;
width: 48px;
height:48px;
}
To change the md-icon size, add this to your CSS:
md-icon {
font-size: 48px;
width: 48px;
height:48px;
}
To change the md-icon color, add this to your CSS:
md-icon {
color: #FFF !important;
}