Ggtcf

I have included Material Icons Rounded to my webpage like this:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Round" rel="stylesheet">

And I have css code for rounded class

.material-icons.material-icons--rounded 
 font-family: 'Material Icons Round';

In the page, star icon looks like this:

If i increase the font-size it turns into this:

Where does that border coming from and how to remove it ?

Edit: I have created a pen to reproduce the problem 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:
Rounded icon colors are not changing on some screen sizes.

I have updated the code snippet which is attached to the question.

• On the 1920x1080 monitor, all icons are red.


• On the 2560 x 1600 macbook retina screen, rounded icons are black and the others are red. (This doesn't seem to be a problem on Chrome or Firefox)

There seems to be a problem with the glyph itself

If you download the SVG glyphs from here
https://material.io/tools/icons/?icon=star&style=round

and here https://material.io/tools/icons/?icon=star&style=round

you can see the rounded glyph is wrong and the pointy star is correct

You should file an issue to https://github.com/material-components

some info to the material team

The path is path("M 0 0 h 24 v 24 H 0 V 0 Z m 0 0 h 24 v 24 H 0 V 0 Z m 12 17.27 l 4.15 2.51 c 0.76 0.46 1.69 -0.22 1.49 -1.08 l -1.1 -4.72 l 3.67 -3.18 c 0.67 -0.58 0.31 -1.68 -0.57 -1.75 l -4.83 -0.41 l -1.89 -4.46 c -0.34 -0.81 -1.5 -0.81 -1.84 0 L 9.19 8.63 l -4.83 0.41 c -0.88 0.07 -1.24 1.17 -0.57 1.75 l 3.67 3.18 l -1.1 4.72 c -0.2 0.86 0.73 1.54 1.49 1.08 l 4.15 -2.5 Z");

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 24 24" wtx-context="97FAD225-6CA6-4D16-A578-52C0523A648F"><path d="M0 0h24v24H0V0zm0 0h24v24H0V0zm12 17.27l4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72 3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41-1.89-4.46c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5z"/></svg>

but should be path("M 12 17.27 l 4.15 2.51 c 0.76 0.46 1.69 -0.22 1.49 -1.08 l -1.1 -4.72 l 3.67 -3.18 c 0.67 -0.58 0.31 -1.68 -0.57 -1.75 l -4.83 -0.41 l -1.89 -4.46 c -0.34 -0.81 -1.5 -0.81 -1.84 0 L 9.19 8.63 l -4.83 0.41 c -0.88 0.07 -1.24 1.17 -0.57 1.75 l 3.67 3.18 l -1.1 4.72 c -0.2 0.86 0.73 1.54 1.49 1.08 l 4.15 -2.5 Z")

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 24 24" wtx-context="97FAD225-6CA6-4D16-A578-52C0523A648F"><path d="M 12 17.27 l 4.15 2.51 c 0.76 0.46 1.69 -0.22 1.49 -1.08 l -1.1 -4.72 l 3.67 -3.18 c 0.67 -0.58 0.31 -1.68 -0.57 -1.75 l -4.83 -0.41 l -1.89 -4.46 c -0.34 -0.81 -1.5 -0.81 -1.84 0 L 9.19 8.63 l -4.83 0.41 c -0.88 0.07 -1.24 1.17 -0.57 1.75 l 3.67 3.18 l -1.1 4.72 c -0.2 0.86 0.73 1.54 1.49 1.08 l 4.15 -2.5 Z"/></svg>

The issue was... you added font-size to both classes.
I replaced it with a new class size--1

.size--1 
 font-size: 60px;

.size--2 
 font-size: 90px;

.material-icons--rounded 
 font-family: 'Material Icons Round;

material-icons class didn't need that style... (he is applying the icon, if I understood right)

HTML:

<i class="material-icons material-icons--rounded size--1">star</i>
<i class="material-icons material-icons--rounded size--2">star</i>

Saw the updated pen...
I've tried

outline: none !important;
border: none !important; 
box-shadow: none !important;

None of these worked...

And star becomes to square, starting from font-size: 67px... even transform: scale(2,2) didn't helped. Something wrong with rounded class))