<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
<symbol class="icon--umbrella" id="umbrella" viewBox="0 0 64 64">
<title>Umbrella</title>
<description>Umbrella with rounded handle and rain drops</description>
<path id="rain" d="M18.228 16.441c2.002 0 3.625-1.623 3.625-3.625 0-2.583-3.625-6.625-3.625-6.625s-3.625 4.042-3.625 6.625c0 2.002 1.623 3.625 3.625 3.625zm-6.439-6.214c0-1.573-2.209-4.036-2.209-4.036s-2.208 2.463-2.208 4.036c0 1.22.989 2.209 2.208 2.209 1.219 0 2.209-.989 2.209-2.209z"/><path d="M34.865 9.072v-.254c0-.957-.795-1.733-1.775-1.733-.981 0-1.776.776-1.776 1.733v.256c-2.749.207-5.354.907-7.758 1.977.185.599.298 1.195.298 1.764 0 3.102-2.523 5.625-5.625 5.625-1.172 0-2.26-.361-3.162-.976-3.366 4.027-5.427 9.183-5.481 14.831.062-3.192 2.665-5.764 5.872-5.764 3.248 0 5.88 2.632 5.88 5.878 0-3.246 2.632-5.878 5.878-5.878 1.226 0 2.363.376 3.305 1.017v23.367c0 3.743 2.999 6.799 6.721 6.891l.172.002v-.002c3.722-.092 6.721-3.147 6.721-6.891 0-1.381-1.119-2.5-2.5-2.5s-2.5 1.119-2.5 2.5c0 1.015-.803 1.846-1.807 1.891-1.004-.045-1.807-.876-1.807-1.891V27.66c.97-.706 2.161-1.128 3.453-1.128 3.247 0 5.879 2.632 5.879 5.878 0-3.246 2.632-5.878 5.879-5.878 3.247 0 5.879 2.632 5.879 5.878 0 .039.019.114.019.114-.002-12.399-9.596-22.55-21.765-23.452z"/>
</symbol>
</svg>
<p>
<svg class="Icon--umbrella">
<use xlink:href="#umbrella" />
</svg>
Umbrella
</p>
</body>
</html>
/* .Icon--umbrella {
width: 4em;
height: 4em;
fill: crimson;
stroke: black;
stroke-width: 1px;
}
#rain {
fill: blue;
} */
p {
color: indigo;
}
p:hover {
color: red;
}
.Icon--umbrella {
width: 4em;
height: 4em;
fill: currentColor;
}
/* Demo only */
body {
margin: 1em;
font-family: sans-serif;
}