How to use own svg icon in semantic ui input?

Question

<div class="ui left icon input">
  <input placeholder="Search users..." type="text">
  <i class="users icon"></i>
</div>

In the above code from https://semantic-ui.com/elements/input.html, how do I use my own src="../my-images/image-01.svg" instead of the users icon there?

Here's the SVG file content BTW:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
<g><path fill="dark gray" d="M963.1,833.6L704.8,575.3c0,0,0,0-6.1,0c30.7-61.5,49.2-123,49.2-190.6c0-202.9-166-368.9-368.9-368.9S10,181.8,10,384.7c0,202.9,166,368.9,368.9,368.9c67.6,0,135.3-18.4,190.6-55.3l0,0l258.2,258.2c36.9,36.9,92.2,36.9,129.1,0C999.9,925.8,999.9,870.5,963.1,833.6z M133,384.7c0-135.3,110.7-245.9,245.9-245.9c135.3,0,245.9,110.7,245.9,245.9c0,135.3-110.7,246-245.9,246C243.7,630.7,133,520,133,384.7z"/></g>
</svg>

@GabeRogan The SVG file content is now in the original post. — user1946932, May 11 '17 at 03:09

score 3 · Accepted Answer · edited May 23 '17 at 12:10

3

Here's a JSFiddle: https://jsfiddle.net/ChefGabe/oeoq9urj/

This solution only works if you're serving the SVG from the same origin.

If you're serving your SVG cross-origin (like a CDN), you'll need a workaround.

HTML

<div class="ui left icon input">
    <input placeholder="Search users..." type="text">
    <i class="icon"><svg><use href="../my-images/image-01.svg"></use></svg></i>
</div>

CSS

svg {
    height: 19px;
    width: 19px;
    margin-top: 9px;
}

edited May 23 '17 at 12:10

Community

1
1

answered May 11 '17 at 03:50

Gabe Rogan

3,343
1
16
22

Actually can you see why it doesn't work with a file link: https://jsfiddle.net/tsbwbngd/1/ ? – user1946932 May 11 '17 at 04:41
@user1946932 my answer stated why the first one doesn't work. I'm not sure what you're asking..? – Gabe Rogan May 11 '17 at 04:44
I gave it a file to link to in that new jsfiddle.net/tsbwbngd/1 , namely http://cdn.onlinewebfonts.com/svg/img_94595.svg . Or are you saying that it isn't possible to use such URLs? – user1946932 May 11 '17 at 04:50
@user1946932 I haven't tested it with a URL. But it does work with a local file. I'll try to see if it's possible. – Gabe Rogan May 11 '17 at 05:00
yep. confirming that this solution doesn't work with a remote URL. will revise my answer. – Gabe Rogan May 11 '17 at 05:01
Yeah it didn't work with "../pages/images/svg1.svg" on our own website either. – user1946932 May 11 '17 at 05:04
Try `href` instead of `xlink:href` – Gabe Rogan May 11 '17 at 05:09
Ahh I figured it out: http://stackoverflow.com/questions/38840482/svg-absolute-pathing-for-xlinkhref-attribute-not-working – Gabe Rogan May 11 '17 at 05:13
Also this may help: http://stackoverflow.com/questions/32850536/cross-domain-svg-sprite – Gabe Rogan May 11 '17 at 05:15

PedroSP · Answer 2 · 2023-05-16T07:06:15.127

I am using Fomantic.ui a later iteration of Semantic.ui, and the fontawesome icon library. Because fontawesome substitutes an "i" tag by a "svg", all expected css rules are not shown. My solution is to create a fake icon tag wrapping the actual one.:

    <i class="middle aligned icon">
      <i class="fa-solid fa-location-dot fa-lg "></i>
    </i>

Once compiled, the html is keeping an "i" tag for rules and generates the "svg" as this:

<i class="middle aligned icon">
  <svg class="svg-inline--fa fa-location-dot fa-lg" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="location-dot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-fa-i2svg=""><path fill="currentColor" d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"></path></svg>
  <!-- <i class="fa-solid fa-location-dot fa-lg "></i> -->
</i>

How to use own svg icon in semantic ui input?

2 Answers2