How to put an svg I made into a button on the left side?

HTML/CSS
1

I am a beginner and want to create a button like this:

button

The svg file is in my own folder and not from a third party website. I also have problems alligning an icon in the button properly. Could someone paste me a code as an example. Then I can read and understand it.

2

Hi,

Never worked with SVG before but as I thought there’s nothing special about it.

Here is an example:

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="description" content="" />
	<meta name="author" content="" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
	<title></title>
	<link href="css/styles.css" rel="stylesheet" />
	<style>
		.icon{
			position: relative;
			height: 0.8em;
			margin-right:10px;
			top: 0px; // Change that for vertical alignement. If OK as is, delete.
		}
		
		button {
			color: white;
			font-weight: bold;
			background-color: red;
			padding:5px 10px;
			border-radius: 20px;
			border: none;
			height: 32px;

		}
	</style>
</head>
<body>
	<button><img src="dessin.svg" class="icon">Test</button>

	<script type="text/javascript" src="scripts.js"></script>
</body>
</html>

I did a random SVG drawing just for the sake of having one.

image

And here is the result.

image

Regards.

3

Thank you very much!