Lately, I've been exploring the world of CSS and Angular. Can someone give me a jumpstart on using CSS to design an element like the one shown in this https://i.stack.imgur.com/vcR3Z.png image?
Essentially, this outer tag consists of a div element that contains both an image and some text.
Edit: To provide more context, here is a snippet of sample code:
HTML file:
<div id="tag">
<svg class="tag-img" xmlns:xlink="http://www.w3.org/1999/xlink">
<use class="tag-img" xlink:href="./images/add-new_tags.svg" />
</svg>
<span class="tagText">tag 1!</span>
</div>
CSS file:
#tag{
border-radius: 20px;
background: #FFFFFF;
padding: 10px;
width: 125px;
height: 17px;
border: solid 1px #000000;
}
.tag-img{
width: 15px;
height: 15px;
}
However, I'm encountering an issue where the SVG image and text are not displaying on the screen.