How to add svg icons to my project?

[brandnkay]

How to add svg icons?

Question

I am wanting to add 2 svg icons to this, one in the input section (an arrow) and one in the the top right corner of the whole element (a cross)

I am struggling to do this so some help would be greatly appreciated!

• I am new to Github so i apologies if i am asking this question in the wrong place.

please see screenshot attatched.

Thanks!

[LiteBrite82]

Thanks for posting in the GitHub Community, @brandnkay !

We’ve moved your post to our Programming Help 🧑‍💻 category, which is more appropriate for this type of discussion.

Please review our guidelines about the Programming Help category for more information.

[brandnkay]

Thanks!

[liker912]

Hi @brandnkay , this is one of the way how to implement it. I hope it will help:
HTML:

    <div class="container">
        <div class="input-icon">
            <input type="text" class="input-field">
            <svg class="arrow-icon" width="24" height="24">
                <!-- yout SVG icon for arrow -->
            </svg>
        </div>
        <svg class="cross-icon" width="24" height="24">
             <!-- yout SVG icon for cross -->
        </svg>
    </div>

And the css:

.container {
    position: relative;
    height: 150px; /* your height */
    width: 300px; /* your width */
}

.input-icon {
    position: relative;
}

.input-field {
    width: 100%;
    padding-left: 30px; /* your space value*/
}

.arrow-icon {
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
}

.cross-icon {
    position: absolute;
    right: 5px;
    top: 5px;
}

[brandnkay]

@liker912 I have managed to do it with the arrow icon! but when i try it with the cross icon and set the position to absolute it is placing the icon into the top right of my actual page not the popup component i included in the screenshot ;/

[liker912]

@brandnkay add a position: relative to the parent element where you want to set a cross svg

[brandnkay]

This worked! Thank you for your help, appreciated.

[liker912]

@brandnkay You are welcome :-)

[ebndev]

@liker912 thanks for all of your participation in Discussions lately! It's been very helpful 😄