I have integrated Material Icons Rounded into my website using the following code:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Round" rel="stylesheet">
Additionally, I have a CSS rule for the rounded class:
.material-icons.material-icons--rounded {
font-family: 'Material Icons Round';
}
On the page, the star icon appears like this:
https://i.sstatic.net/phREF.png
If I increase the font size, it changes to this:
https://i.sstatic.net/8Dfcx.png
Where does that border come from and how can it be removed?
Edit: I have created a pen to demonstrate the issue https://codepen.io/anon/pen/wOJdMZ
@import "https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Round";
.material-icons--rounded {
font-family: "Material Icons Round";
}
i {
color: red;
}
.material-icons {
font-size: 60px;
}
.size--2 {
font-size: 90px;
}<table>
<tr>
<th>Rounded</th>
<td><i class="material-icons material-icons--rounded">star</i></td>
<td><i class="material-icons material-icons--rounded size--2">star</i></td>
<td><i class="material-icons material-icons--rounded">star_half</i></td>
<td><i class="material-icons material-icons--rounded size--2">star_half</i></td>
<td><i class="material-icons material-icons--rounded">star_border</i></td>
<td><i class="material-icons material-icons--rounded size--2">star_border</i></td>
</tr>
<tr>
<th>Not Rounded<br>
<td><i class="material-icons">star</i></td>
<td><i class="material-icons size--2">star</i></td>
<td><i class="material-icons">star_half</i></td>
<td><i class="material-icons size--2">star_half</i></td>
<td><i class="material-icons">star_border</i></td>
<td><i class="material-icons size--2">star_border</i></td>
</tr>
</table>UPDATE: The colors of the rounded icons are not changing on certain screen sizes.
I have updated the code snippet included in the question.
- On the 1920x1080 monitor, all icons are appearing as red.
- On the 2560 x 1600 MacBook Retina screen, the rounded icons are black while the others remain red. (This issue doesn't seem to occur in Chrome or Firefox)
UPDATE 2
The color issue remains unsolved. On Retina screens, the icons do not display any color. They always appear black. https://i.sstatic.net/MEIde.jpg Looking for assistance regarding this matter.