Icons don't show up in Tinymce editor

Question

i try to make a custom styled list editable with tinymce. The list-items have Material-Check-Icons as bullet-points. I add the checkicons as css-pseudo-elements ::before . This works fine but if i add tinymce (v5) to the list to make it editable, the icons disappear. How can i show the list-icons within the tinymce content? ... I already tried to add the material-icon-library to the content_css.

<div id="editable">
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ul>
</div>

tinymce.init({
  selector: '#editable',
  inline: true,
  content_css: ['https://fonts.googleapis.com/icon?family=Material+Icons']
})

#editable ul{
  padding-left: 0;
  list-style-type: none;
}
#editable ul>li {
  padding-left: 25px;
  margin-top: 10px;
  position: relative;
}
#editable ul>li:before {
  content: "check";
  font-family: Material Icons;
  position: absolute;
  left: 0;
  top: -2px;
  font-size: 17px;
  color: #3770d6;
}

Here i made a codepen .

Answer 1

I think there might be issue with CSS content:" ".
But Here's the fix I did on you can get it done with unicode.

.custom-list>li:before {
  content: "\e5ca";
  font-family: Material Icons;
  }

Link to codepoints in GitHub repository: GitHub repository

I don't know if you get my point or not.