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

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


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.


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

Here is an example:

<!DOCTYPE html>
<html lang="fr">
	<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" />
	<link href="css/styles.css" rel="stylesheet" />
			position: relative;
			height: 0.8em;
			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;

	<button><img src="dessin.svg" class="icon">Test</button>

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

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


And here is the result.



Thank you very much!