fix(svg-icons): icon size consistency (#8380)

* fix(svg-icons): icon size consistency

The icons have been regenerated from the svg files in `videojs/font` to ensure consistency in size.

- update icons.svg file

* fix(svg-icons): default height and width in css

Uses the same reference value from the font size of `font icons` to define the default height and width of `svg icons`

* fix(big-play-button): default height and width of svg icon

Uses the same size as the big-play-button font size and centers the svg icon

* fix(volume-control): default height and width of svg icon

Uses the same size as the `volume-level` font size and
centers the svg icon for both horizontal and vertical display

* fix(volume-control): mouse-display overlaps the volume-level svg icon

* fix(play-progress): default height and width of svg icon

Uses the same size as the `play-progress` font size and removes the hover effect

* fix(subtitles-button): default height and width of svg icon

Uses the same size as the `subtitles button` font size

src/css/_icons.scss

@@ -12,8 +12,8 @@
   background-position: center;
 
   fill: #FFFFFF;
-  height: 1.5em;
-  width: 1.5em;
+  height: 1.8em;
+  width: 1.8em;
 
   // Overwrite any font content
   &:before {

src/css/components/_big-play.scss

@@ -31,8 +31,13 @@
 }
 
 .vjs-big-play-button .vjs-svg-icon {
-  width: 0.75em;
-  height: 0.75em;
+  width: 1em;
+  height: 1em;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  line-height: 1;
+  transform: translate(-50%, -50%);
 }
 
 .video-js:hover .vjs-big-play-button,

src/css/components/_progress.scss

@@ -91,8 +91,8 @@
   position: absolute;
   top: -0.35em;
   right: -0.4em;
-  width: 1em;
-  height: 1em;
+  width: 0.9em;
+  height: 0.9em;
   pointer-events: none;
   line-height: 0.15em;
   z-index: 1;
@@ -138,15 +138,6 @@
   z-index: 1;
 }
 
-// Update the size of the progress circle when using SVG icons
-.vjs-progress-control:hover .vjs-progress-holder .vjs-play-progress .vjs-svg-icon {
-  width: 0.8em;
-  height: 0.8em;
-  top: -0.25em;
-  right: -0.5em;
-  line-height: 0.35em;
-}
-
 .video-js .vjs-progress-holder:focus .vjs-time-tooltip {
   display: none;
 }

src/css/components/_subs-caps.scss

@@ -15,7 +15,8 @@
 }
 
 .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-svg-icon {
-  margin-left: 0.3em;
+  width: 1.5em;
+  height: 1.5em;
 }
 
 .video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder {

src/css/components/_volume.scss

@@ -143,17 +143,10 @@
 
 .vjs-volume-level .vjs-svg-icon {
   position: absolute;
-  width: 0.6em;
-  height: 0.6em;
-  top: -0.55em;
+  width: 0.9em;
+  height: 0.9em;
   pointer-events: none;
-}
-
-// Due to this icon from Material UI being a bit smaller than the others,
-// we will adjust the height and width
-.vjs-mute-control .vjs-svg-icon {
-  width: 1.75em;
-  height: 1.75em;
+  z-index: 1;
 }
 
 .vjs-slider-horizontal .vjs-volume-level {
@@ -169,13 +162,12 @@
 // here
 // Update placement of circle icon when using SVG icons
 .vjs-slider-horizontal .vjs-volume-level .vjs-svg-icon {
-  top: -0.15em;
   right: -0.3em;
-  line-height: 0.05em;
+  transform: translateY(-50%);
 }
 .vjs-slider-vertical .vjs-volume-level .vjs-svg-icon {
-  top: -0.9em;
-  right: -0.15em;
+  top: -0.55em;
+  transform: translateX(-50%);
 }
 
 .video-js .vjs-volume-panel.vjs-volume-panel-vertical {