vue-video-playerで動画を再生中に一部アイコンが表示されない

Question

前提・実現したいこと

Nuxtのプロジェクト内で動画を再生するためにvue-video-playerというプラグインを使用しています。
しかし、controlsをtrueにした際に、再生中のアイコンが正常に表示されずに困っています。

vue-video-player: 公式ドキュメント

発生している問題・エラーメッセージ

vue-video-playerを使用していますが、動画自体は上手く動作してます。
cssもdocumentに記載されていたものをscript内でimportで読み込んでおり、スタイルも当たっています。
しかし、動画再生中に下部に表示されるバー内のアイコンが以下画像のように表示されており対処法がわからず悩んでいます。

一点気になる点が、動画再生前の動画開始アイコン、sourceが見つからない時の再生不可のアイコンは正常に表示されていました。
そのため、アイコンが全て表示されていないわけではなさそうです。

-動画再生中に正常に表示されないアイコン

-動画再生前に正常に表示されているアイコン

該当のソースコード

以下のcomponentをpages以下で読み込んでます。
なお、下記のコードでは不要と思われる部分は削除しています。

<template>
  <div class="wrapper">
    <video-player :options="playerOptions"></video-player>
  </div>
<script>
import "video.js/dist/video-js.css";
import { videoPlayer } from "vue-video-player";

export default {
  components: {
    videoPlayer
  },
  props: {
    src: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      playerOptions: {
        autoplay: true,
        controls: true,
        width: 1200,
        height: 675,
        sources: [
          {
            type: "video/mp4",
            src: this.src
          }
        ]
      }
    };
  }
};
</script>

<style scoped>
</style>

試したこと

公式ドキュメントを確認し、色々値をいじってみましたが、効果はありませんでした。
また、以前別プロジェクトで同様のプラグインを使用し、今回表示されていないアイコンが正常に表示されることも確認しております。
その時のコードと見比べてみましたが、特にこれといった解決策は見つけられませんでした。
おそらく、install等の問題でしょうか。。。

補足情報

"nuxt": "^2.4.2",
"vue-video-player": "^5.0.2"