Building SVG Icon with javaScript

Question

I'm trying to create a dynamic elements with javaScript, one of the elements is a button with svg icon, everything works fine except the svg is not shown, if I edit it in browser and delete an empty space (literarily making no difference to the code) the svg will appear

the code I want to dynamically create:

<div class="attachment-element mb-2">
<input id="" type="file" class="form-control d-inline">
<button class="btn btn-danger col-3" style="vertical-align: top !important;">
    <svg xmlns="http://www.w3.org/2000/svg" fill="white" width="22" height="22" viewBox="0 0 24 24" class="ml-1 mb-1">
        <path d="M20 4h-20v-2h5.711c.9 0 1.631-1.099 1.631-2h5.316c0 .901.73 2 1.631 2h5.711v2zm-7 15.5c0-1.267.37-2.447 1-3.448v-6.052c0-.552.447-1 1-1s1 .448 1 1v4.032c.879-.565 1.901-.922 3-1.006v-7.026h-18v18h13.82c-1.124-1.169-1.82-2.753-1.82-4.5zm-7 .5c0 .552-.447 1-1 1s-1-.448-1-1v-10c0-.552.447-1 1-1s1 .448 1 1v10zm5 0c0 .552-.447 1-1 1s-1-.448-1-1v-10c0-.552.447-1 1-1s1 .448 1 1v10zm13-.5c0 2.485-2.017 4.5-4.5 4.5s-4.5-2.015-4.5-4.5 2.017-4.5 4.5-4.5 4.5 2.015 4.5 4.5zm-3.086-2.122l-1.414 1.414-1.414-1.414-.707.708 1.414 1.414-1.414 1.414.707.708 1.414-1.414 1.414 1.414.708-.708-1.414-1.414 1.414-1.414-.708-.708z"></path>
    </svg>
</button>

the result I get is literarily the same and here it is

<div class="attachment-element mb-2">
<input type="file" class="form-control d-inline" id="at-1">
<button class="btn btn-danger col-3" style="vertical-align:top!important">
    <svg xmlns="http://www.w3.org/2000/svg" class="ml-1 mb-1" fill="white" width="22" height="22" viewbox="0 0 24 24">
        <path d="M20 4h-20v-2h5.711c.9 0 1.631-1.099 1.631-2h5.316c0 .901.73 2 1.631 2h5.711v2zm-7 15.5c0-1.267.37-2.447 1-3.448v-6.052c0-.552.447-1 1-1s1 .448 1 1v4.032c.879-.565 1.901-.922 3-1.006v-7.026h-18v18h13.82c-1.124-1.169-1.82-2.753-1.82-4.5zm-7 .5c0 .552-.447 1-1 1s-1-.448-1-1v-10c0-.552.447-1 1-1s1 .448 1 1v10zm5 0c0 .552-.447 1-1 1s-1-.448-1-1v-10c0-.552.447-1 1-1s1 .448 1 1v10zm13-.5c0 2.485-2.017 4.5-4.5 4.5s-4.5-2.015-4.5-4.5 2.017-4.5 4.5-4.5 4.5 2.015 4.5 4.5zm-3.086-2.122l-1.414 1.414-1.414-1.414-.707.708 1.414 1.414-1.414 1.414.707.708 1.414-1.414 1.414 1.414.708-.708-1.414-1.414 1.414-1.414-.708-.708z"></path>
    </svg>
</button>

and here is how they look the attachments

I'm using Vue.js, but the creating code is Java:

    var input_id = ++this.aCount

    // creating input element
    var input = document.createElement("input");
    input.setAttribute('type', 'file');
    input.setAttribute('class', 'form-control d-inline');
    input.setAttribute('id', 'at-'+input_id);
                
    // creating path element
    var path = document.createElement("path");
    path.setAttribute('d','M20 4h-20v-2h5.711c.9 0 1.631-1.099 1.631-2h5.316c0 .901.73 2 1.631 2h5.711v2zm-7 15.5c0-1.267.37-2.447 1-3.448v-6.052c0-.552.447-1 1-1s1 .448 1 1v4.032c.879-.565 1.901-.922 3-1.006v-7.026h-18v18h13.82c-1.124-1.169-1.82-2.753-1.82-4.5zm-7 .5c0 .552-.447 1-1 1s-1-.448-1-1v-10c0-.552.447-1 1-1s1 .448 1 1v10zm5 0c0 .552-.447 1-1 1s-1-.448-1-1v-10c0-.552.447-1 1-1s1 .448 1 1v10zm13-.5c0 2.485-2.017 4.5-4.5 4.5s-4.5-2.015-4.5-4.5 2.017-4.5 4.5-4.5 4.5 2.015 4.5 4.5zm-3.086-2.122l-1.414 1.414-1.414-1.414-.707.708 1.414 1.414-1.414 1.414.707.708 1.414-1.414 1.414 1.414.708-.708-1.414-1.414 1.414-1.414-.708-.708z')

    // creating svg element
    var svg = document.createElement("svg");
    svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
    svg.setAttribute('class', 'ml-1 mb-1');
    svg.setAttribute('fill', 'white');
    svg.setAttribute('width', '22');
    svg.setAttribute('height', '22');
    svg.setAttribute('viewBox', '0 0 24 24');
    svg.appendChild(path);

    // creating button element
    var button = document.createElement("button");
    button.setAttribute('class', 'btn btn-danger col-3');
    button.setAttribute('style', 'vertical-align:top!important');
    button.appendChild(svg);

    // Creating attachment Element
    var attachment_element = document.createElement("div");
    attachment_element.setAttribute('class', 'attachment-element mb-2');
    attachment_element.appendChild(input);
    attachment_element.appendChild(button);

    // adding the code block
    var parent = document.getElementById("at-div");
    parent.appendChild(attachment_element);

I don't know if I missed up something or there is a better way that would work for me,

sorry for making a long question & Thanks for help <3

Use the code above plus remove the svg.setAttribute ones and also svg.appendChild(path). — L777, Sep 11 '21 at 19:17

Building SVG Icon with javaScript

0 Answers0