diff --git a/src/js/controller.js b/src/js/controller.js
index f7024d8..602eb57 100644
--- a/src/js/controller.js
+++ b/src/js/controller.js
@@ -173,7 +173,7 @@ class Controller {
             document.addEventListener(utils.nameMap.dragEnd, volumeUp);
             this.player.template.volumeButton.classList.add('dplayer-volume-active');
         });
-        this.player.template.volumeIcon.addEventListener('click', () => {
+        this.player.template.volumeButtonIcon.addEventListener('click', () => {
             if (this.player.video.muted) {
                 this.player.video.muted = false;
                 this.player.switchVolumeIcon();
@@ -280,4 +280,4 @@ class Controller {
     }
 }
 
-export default Controller;
\ No newline at end of file
+export default Controller;
diff --git a/src/js/template.js b/src/js/template.js
index b64cfb3..46bc942 100644
--- a/src/js/template.js
+++ b/src/js/template.js
@@ -30,6 +30,7 @@ class Template {
         this.volumeBarWrap = this.container.querySelector('.dplayer-volume-bar');
         this.volumeBarWrapWrap = this.container.querySelector('.dplayer-volume-bar-wrap');
         this.volumeButton = this.container.querySelector('.dplayer-volume');
+        this.volumeButtonIcon = this.container.querySelector('.dplayer-volume-icon');
         this.volumeIcon = this.container.querySelector('.dplayer-volume-icon .dplayer-icon-content');
         this.playedBar = this.container.querySelector('.dplayer-played');
         this.loadedBar = this.container.querySelector('.dplayer-loaded');