Javascript 为什么进度条图标消失，以及如何在Video.Js中将播放按钮更改为材质图标？

我正在使用Video.js播放视频。我需要通过将播放按钮图标更改为材质图标来进行一些自定义。即使我添加了材质图标的字体系列，图标也不起作用。我不知道为什么。这是我的字体系列的CSS代码和新的播放图标

@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;
    src:
    url(../fonts/material-icons/MaterialIcons-Regular.woff2) format('woff2'),
    url(../fonts/material-icons/MaterialIcons-Regular.woff) format('woff'),
    url(../fonts/material-icons/MaterialIcons-Regular.eot?#iefix) format('embedded-opentype'),
    url(../fonts/material-icons/MaterialIcons-Regular.ttf) format('truetype'),
    url(../fonts/material-icons/MaterialIcons-Regular.svg) format('svg');
}

.video-js .vjs-big-play-button .vjs-icon-placeholder::before {
    content: "\eb86";
    position: relative;
    top: 0px;
    font-size: 6rem;
    color: #8c8cf9;
   -webkit-transition: all 0.5s;
    transition: all 0.5s;
    display: block;
}

进度条中的圆圈也不显示。视频开始后看起来很尴尬。谁能给我一些建议来解决这个问题

---

谢谢

默认Video.js图标字体中的图标无论如何都是来自材质图标。好的。但在我的例子中，有些图标没有材质图标在工作。与真实的unicodes相比，图标可能有不同的unicodes。但为什么进度条图标不起作用？该图标也是来自Video.js字体。。。