[SOLVED] Controls font/symbols missing

Controls font/symbols missing - videogular

I ran into a a problem with videogular controls. I must be missing some step in the installation process. I guess I need to include some symbols font, but have no idea where to find it and how to include it.

The controls appear to have no images/symbols/fonts - instead I get empty rectangles (don't have enough of reputation here to post a screenshot). Here are the included files:

"/js/Vendors/videogular/videogular.min.js",
"/js/Vendors/videogular/vg-controls.min.js",
"/js/Vendors/videogular/vg-poster.min.js",
"/js/Vendors/videogular/vg-buffering.min.js",
"/js/Vendors/videogular/vg-overlay-play.min.js",

Here is what is passed to the module:

"ngSanitize",
"com.2fdevs.videogular",
"com.2fdevs.videogular.plugins.controls",
"com.2fdevs.videogular.plugins.overlayplay",
"com.2fdevs.videogular.plugins.poster"

And the controller code:

App.controller('Player',
    ["$sce", function ($sce) {
                    var controller = this;
        controller.API = null;

        controller.onPlayerReady = function(API) {
            controller.API = API;
        };

                    controller.fscreen=function(){
                        controller.API.toggleFullScreen();
                    };


        this.config = {
            sources: [
                {src: $sce.trustAsResourceUrl('http://'+document.domain+"/data/video/trailer.mp4"), type: "video/mp4"},
                {src: $sce.trustAsResourceUrl('http://'+document.domain+"/data/video/trailer.webm"), type: "video/webm"}                    
            ],
                            width: 1920,
                            height: 1080,      
                            responsive: true,

            theme: {
                                url:"http://www.videogular.com/styles/themes/default/latest/videogular.css",
                                playIcon: "&#xe000;",
                                pauseIcon: "&#xe001;",
                                volumeLevel3Icon: "&#xe002;",
                                volumeLevel2Icon: "&#xe003;",
                                volumeLevel1Icon: "&#xe004;",
                                volumeLevel0Icon: "&#xe005;",
                                muteIcon: "&#xe006;",
                                enterFullScreenIcon: "&#xe007;",
                                exitFullScreenIcon: "&#xe008;"
                            },

        };
    }]
);

HTML (Twig) code:

{% extends "base.html.twig" %}
{% block content %}   
    <controller-wrapper data-ng-controller="Transit as T">
    <controller-wrapper ng-controller="Player as controller">
    <videogular vg-player-ready="controller.onPlayerReady($API)" vg-theme="controller.config.theme">
    <div id="wrapper">
            {% include '/commons/header.html.twig' %}
            <main >  
                <div id="play" data-ng-click="T.transit=!T.transit;" data-ng-hide="T.transit">
                    <h1>Watch trailer</h1>
                    <p>(video pitch)</p>
                </div>
                <div  class="videogular-container" data-ng-show="T.transit" >
                                <vg-media vg-src="controller.config.sources">
                                </vg-media>
                                <vg-controls>
                                    <vg-play-pause-button></vg-play-pause-button>
                                    <vg-time-display>{{'{{ currentTime | date:"mm:ss" }}'}}</vg-time-display>
                                    <vg-scrub-bar>
                                            <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
                                    </vg-scrub-bar>
                                    <vg-time-display>{{'{{ timeLeft | date:"mm:ss" }}'}}</vg-time-display>
                                    <vg-volume>
                                            <vg-mute-button></vg-mute-button>
                                            <vg-volume-bar></vg-volume-bar>
                                    </vg-volume>
                                    <vg-fullscreen-button></vg-fullscreen-button>
                                </vg-controls>     
                </div>

            </main>
            <div id="push-footer"></div>
    </div>      
   {% include '/commons/footer.html.twig' %}
   </videogular>
   </controller-wrapper>
   </controller-wrapper>
{% endblock %}

Solution

You need to change this line:

vg-theme="controller.config.theme"

By this:

vg-theme="controller.config.theme.url"