MaterialIcons-Regular as font bugs when any CSS *:first-letter is applied

My MaterialIcons-Regular icons disappear or explode into two different icons if I apply any CSS rule on this selector, while on Chrome.

 *:first-letter {
    color: #000 
}

Any idea on what's might be wrong here ?

Want to see what I mean ? Link to open in Firefox and in Chrome : https://jsfiddle.net/z7xmf81u/

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<style>
*:first-letter {color: blue;}
h1   {color: blue;}
p    {color: red;}
</style>

<body>
<p>test</p>
<i class="material-icons">cloud</i>
<i class="material-icons" style="font-size:48px;">cloud</i>
<i class="material-icons" style="font-size:60px;color:red;">cloud</i>
<i class="material-icons" style="font-size:60px;color:red;">network_check</i>

</body>
</html>

you can remove the

*:first-letter {color: blue;}

line at will.

Any workaround appreciated, thanks

Solution

Hmmm...It seems to be because this is a ligature font.

When this pseudo-element is applied cloud becomes "cloud" which has no equivalent in Mat-icons. Equally network_check becomes "network_check" and it's possible that network and check do have MI equivalents. Perhaps *:not(.material-icons) might work?

*:not(.material-icons):first-letter {
  color: blue;
}

h1 {
  color: blue;
}

p {
  color: red;
}

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


<body>
  <p>test</p>
  <i class="material-icons">cloud</i>
  <i class="material-icons" style="font-size:48px;">cloud</i>
  <i class="material-icons" style="font-size:60px;color:red;">cloud</i>
  <i class="material-icons" style="font-size:60px;color:red;">network_check</i>

</body>