add volume icon

src/components/Player.vue

@@ -7,7 +7,8 @@
 				class="player"
 				:class="player.isPlaying ? 'pause' : 'play'" />
 		</div>
-		<div id="volumeicon" class="full" />
+		<div class="volumeIcon volumeFull
+		" />
 		<input
 			class="volume"
 			type="range"
@@ -18,7 +19,6 @@
 			:value="player.volume"
 			@input="changeVolume($event)">
 		<span class="stationMetadata" />
-		{{ player.volume }}
 	</div>
 </template>
 
@@ -91,29 +91,19 @@ export default {
 		overflow:hidden;
 	}
 
-	#volumeicon {
-		width: 20px;
-		height: 20px;
-		background-size: contain;
-		background-repeat: no-repeat;
+	.volumeIcon {
+		width: 25px;
+		height: 25px;
 		position: relative;
-		left: 75px;
-		top: 14px;
+		left: 85px;
+		top: 20px;
 	}
 
-	#volumeicon.full {
-		background: red;
-		/* background-image: url('../img/sound_full.png'); */
-	}
-
-	#volumeicon.mid {
-		background: yellow;
-		/* background-image: url('../img/sound_mid.png'); */
-	}
-
-	#volumeicon.silent {
-		background: green;
-		/* background-image: url('../img/sound_silent.png'); */
+	.volumeFull {
+		background-color: #0082c9;
+		mask-repeat: no-repeat;
+		mask-size: 100%;
+		mask-image: var(--icon-sound-000);
 	}
 
 	.volume{
@@ -121,7 +111,7 @@ export default {
 		display: inline-block;
 		position: relative;
 		left: 40px;
-		top: -7px;
+		top: -12px;
 	}
 
 </style>