セマンティックUI入力で独自のsvgアイコンを使用するにはどうすればよいですか？

Question

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

上記のコードのhttps://semantic-ui.com/elements/input.htmlでは、ユーザーアイコンの代わりに自分のsrc = "../ my-images/image-01.svg"を使用するにはどうすればよいですか？ここで

は、SVGファイルの内容は、ところでです：

<?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> 

Answer 1

ここJSFiddleです：あなたは同じ起源からSVGを提供している場合https://jsfiddle.net/ChefGabe/oeoq9urj/

このソリューションにのみ機能します。

SVGのクロスオリジン（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; 
}