how I can embed svg icon in html and use css fill property to change its color?
<svg>
<use xlink:href="assets/images/icon-reaction.svg"></use>
</svg>
i have tried this way but didn't work
<img src="assets/images/icon-reaction.svg">
You can't change the color of an external file with the fill property. You can put the SVG info anywhere on the page (typically at the bottom) and then use the <use> tag where you want it.
svg {
width: 4em;
height: 4em;
fill: navy;
}<svg><use href="#icon-timr"></use></svg>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-timr" viewBox="0 0 800 800">
<g transform="translate(0.000000,800.000000) scale(0.100000,-0.100000)">
<path d="M2345 6839 c-379-8-492-20-552-55-117-68-298-242-352-336-65-114-93-340-94-758-1-290 11-401 59-560 66-218 208-382 392-450 168-63 304-80 655-80 l277 0 0-957 c0-527 5-1118 10-1313 20-754 70-937 302-1097 176-122 288-157 493-156 169 1 254 20 394 89 77 38 110 62 176 128 70 69 90 98 140 196 32 63 59 116 60 118 2 2 61-44 132-103 218-181 383-277 603-348 189-62 312-82 505-81 193 1 283 18 410 79 290 140 482 507 502 960 10 229-16 393-104 660-57 175-65 252-33 345 12 35 68 161 124 280 139 289 156 348 176 585 13 163 13 860 0 1070-38 605-148 856-549 1255-382 380-560 456-1186 505-387 30-1718 43-2540 24z m2430-389 c295-21 416-52 644-166 179-88 295-169 404-283 101-105 168-204 256-382 71-143 106-241 143-399 19-83 22-124 23-320 0-200-3-237-23-328-71-317-206-567-421-783-135-134-241-208-436-305-150-74-206-122-225-194-14-53-6-93 32-152 59-94 239-200 428-254 250-70 386-189 406-356 17-145-102-336-251-404-195-89-439-64-734 77-501 238-752 673-751 1302 1 224 31 358 104 464 69 100 166 148 333 164 136 13 218 40 323 110 109 71 249 208 282 274 49 98 65 251 49 461-15 197-45 263-182 401-120 121-171 150-318 179-63 12-740 54-883 54 l-46 0-5-1427 c-4-1442-7-1579-43-1788-26-154-83-243-190-296-41-20-63-24-139-23-105 0-164 22-253 93-102 81-133 162-153 401-6 76-12 699-16 1578 l-5 1452-363 0 c-411 0-574 10-708 44-152 39-235 94-283 187-78 155-38 363 96 500 100 102 181 118 660 129 453 11 2061 4 2245-10z m-37-1868 c13-4 23-11 23-17 0-16-96-29-143-19-47 10-61 30-26 37 35 7 120 6 146-1z"></path>
</g>
</symbol>
</svg>This method is common when using multiple SVGs, which avoids making multiple connections when the page loads. Additional SVGs are defined within additional <symbol> tags in the same <svg> tag.