How to cache svg (embedded as <object>) in browser

Question

I have an angular2 application that consists of several components that insert (param) different small svg files into their templates. The reason for this choice is that I need to interact with svg and manipulate the internal DOM of svg files. I also want to refer to the svg file and not use inline svg several places in the template, its cleaner in the component template.

My problem is that these svg files are not cached in the browser, and when loading a page with several components (which displays these svg files), I notice a slight delay before the page finishes loading. This is far from optimal, and I am thinking of returning to inline svg if I cannot solve this problem.

My goal is to be able to specify the component template in the svg file, and when this component is downloaded for the first time, it will not be sent from the server, but will be extracted from the browser cache. Hope this solves the boot delay issue that I have. I already tried to define the cache.manifest file in the root of my application (which defines the different svgs to be cached), but when the component loads, the server sends svgs (and param.js) anyway every time the component loads.

This is how I structured one of the component templates, which consists of the svg character, and when I click the svg character, I open a popup that should contain the same character:

<div>
    <!--Header-->
    <div>{{ name }}</div>

    <!--Actual svg symbol Object-param style-->
    <div class="symbolIcon"(mouseup)="onMouseUp()" (mousedown)="onMouseDown()" >
        <object type="image/svg+xml" data="app/mySymbol.svg" >
                <param name='Activate' value={{activate}} /> 
                <param name='Status' value={{status}} /> 
        </object>
    </div>
</div>

<!--Placeholder for Popup-->
<modal-popup *ngIf="loadPopup" (command)="popupCmd($event);">
    <!--Symbol to be placed on Popup (same as in template above)-->
    <div class="modal-startstop-symbol">
        <!--Place content here...injected into "ng-content" in child-->
        <object type="image/svg+xml" data="app/mySymbol.svg" >
                <param name='Activate' value={{activate}} /> 
                <param name='Status' value={{status}} /> 
        </object>

    </div>
</modal-popup >