Videogular controls not fully rendering

I'm implementing a site that is using Videogular to play the videos as it integrates nicely with the rest of the AngularJS within the site. Every file that is needed appears to be in the correct location in the path but the end result is only the total time, the elapsed time, and the elapsed time bar are shown.

Now I now the controls are there as if I hover over where the volume control should be the volume appears.

I'm testing in Chrome Version 32.0.1700.107. I think I followed the demo to the letter.

This is how I"m referencing the specific style sheets

    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/offcanvas.css">
    <link rel="stylesheet" href="css/videogular/videogular.css">
    <link rel="stylesheet" href="css/app2.css"/>

This is how I'm pulling in the js files. Not shown are inclusion of jquery, bootstrap, and offcanvas js files.

    <script src="lib/angular/angular.js"></script>
    <script src="lib/angular/angular-route.js"></script>
    <script src="lib/angular/angular-sanitize.js"></script>
    <script src="js/videogular/videogular.js" type="text/javascript"></script>
    <script src="js/videogular/plugins/controls.js" type="text/javascript"></script>
    <script src="js/videogular/plugins/overlay-play.js" type="text/javascript"></script>
    <script src="js/videogular/plugins/buffering.js" type="text/javascript"></script>
    <script src="js/videogular/plugins/poster.js" type="text/javascript"></script>
    <script src="js/app.js"></script>
    <script src="js/services.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/filters.js"></script>
    <script src="js/directives.js"></script>

I even used the same config as the demo

  $scope.config = {
    width: 640,
    height: 360,
    autoHide: false,
    autoPlay: true,
    responsive: true,
    theme: {
      url: "css/videogular/videogular.css",
      playIcon: "&#xe000;",
      pauseIcon: "&#xe001;",
      volumeLevel3Icon: "&#xe002;",
      volumeLevel2Icon: "&#xe003;",
      volumeLevel1Icon: "&#xe004;",
      volumeLevel0Icon: "&#xe005;",
      muteIcon: "&#xe006;",
      enterFullScreenIcon: "&#xe007;",
      exitFullScreenIcon: "&#xe008;"
    }

Finally my directory structure is this:

app
- css
- videogular
  - fonts
    - icomoon.eot
    - icomoon.svg
    - icomoon.ttf
    - icomoon.woff
  - videogular.css
- img
- js
  - videogular
  - plugins
    - buffering.js
    - controls.js
    - overlay-play.js
    - poster.js
  - videogular.js
- lib
- partials
- videos
- views
  - videogular
    - plugins
      - buffering
        
        buffering.html
      - controls
        
        controls.html
        
        full-screen-button.html
        
        mute-button.html
        
        play-pause-button.html
        
        volume-bar.html
      - overlay-play
        
        overlay-play.html
- index.html

Now I'm certain I'm missing something but I can't see it. Any help?

Solution

So I figured it out. Based on the comment from elecash to the question that everything looked correct I compared everything to the demo. As it turns out my mistake was getting the icomoon font from the icomoon website and not the demo. Without the unicode definitions defined in the icomoon.svg it had no means of knowing the correct glyphy to display eventhough it was correctly defined in the config correctly. A quick download of the font files and restarting of the server and everything rendered correctly.