0

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

priya_singh
  • 2,478
  • 1
  • 14
  • 32
Poutrathor
  • 1,990
  • 2
  • 20
  • 44

1 Answers1

0

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>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • I did this to workaround the issue. Still, a Google font failing on a Google browser, ironic. Here is my command to replace it : `sed -r -i -e 's/\*:first-letter/\*:not(.material-icons):first-letter/g' dummy.css` – Poutrathor Jul 04 '18 at 13:23