update

packages/artplayer/src/icons/config.svg

@@ -0,0 +1 @@
+<svg height="24" viewBox="0 0 24 24" width="24"><path d="M15,17h6v1h-6V17z M11,17H3v1h8v2h1v-2v-1v-2h-1V17z M14,8h1V6V5V3h-1v2H3v1h11V8z            M18,5v1h3V5H18z M6,14h1v-2v-1V9H6v2H3v1 h3V14z M10,12h11v-1H10V12z" fill="white" data-darkreader-inline-fill="" style="--darkreader-inline-fill:#a8a6a4;"></path></svg>

packages/artplayer/src/icons/index.js

@@ -13,6 +13,8 @@ import fullscreen from './fullscreen.svg';
 import fullscreenWeb from './fullscreen-web.svg';
 import arrowLeft from './arrow-left.svg';
 import arrowRight from './arrow-right.svg';
+import playbackRate from './playbackRate.svg';
+import config from './config.svg';
 import pip from './pip.svg';
 
 export default class Icons {
@@ -32,6 +34,8 @@ export default class Icons {
             fullscreenWeb,
             arrowLeft,
             arrowRight,
+            playbackRate,
+            config,
             pip,
             ...art.option.icons,
         };

packages/artplayer/src/icons/playbackRate.svg

@@ -0,0 +1 @@
+<svg height="24" viewBox="0 0 24 24" width="24"><path d="M10,8v8l6-4L10,8L10,8z M6.3,5L5.7,4.2C7.2,3,9,2.2,11,2l0.1,1C9.3,3.2,7.7,3.9,6.3,5z            M5,6.3L4.2,5.7C3,7.2,2.2,9,2,11 l1,.1C3.2,9.3,3.9,7.7,5,6.3z            M5,17.7c-1.1-1.4-1.8-3.1-2-4.8L2,13c0.2,2,1,3.8,2.2,5.4L5,17.7z            M11.1,21c-1.8-0.2-3.4-0.9-4.8-2 l-0.6,.8C7.2,21,9,21.8,11,22L11.1,21z            M22,12c0-5.2-3.9-9.4-9-10l-0.1,1c4.6,.5,8.1,4.3,8.1,9s-3.5,8.5-8.1,9l0.1,1 C18.2,21.5,22,17.2,22,12z" fill="white" data-darkreader-inline-fill="" style="--darkreader-inline-fill:#a8a6a4;"></path></svg>

packages/artplayer/src/setting/aspectRatio.js

@@ -1,8 +1,10 @@
 export default function aspectRatio(art) {
-    const { i18n } = art;
+    const { i18n, icons } = art;
+    
     return {
         width: 150,
         html: i18n.get('Aspect ratio'),
+        icon: '',
         items: ['default', '4:3', '16:9'].map((item) => {
             return {
                 html: item === 'default' ? i18n.get('Default') : item,

packages/artplayer/src/setting/flip.js

@@ -1,5 +1,5 @@
 export default function playbackRate(art) {
-    const { i18n } = art;
+    const { i18n, icons } = art;
 
     const keys = {
         normal: 'Normal',
@@ -10,6 +10,7 @@ export default function playbackRate(art) {
     return {
         width: 150,
         html: i18n.get('Flip'),
+        icon: '',
         items: Object.keys(keys).map((key) => {
             return {
                 html: i18n.get(keys[key]),

packages/artplayer/src/setting/index.js

@@ -103,7 +103,8 @@ export default class Setting extends Component {
             append($left, item.html);
         } else {
             if (hasItems) {
-                append($left, '<i class="art-icon"></i>');
+                const $icon = append($left, item.icon || icons.config);
+                addClass($icon, 'art-setting-item-left-icon');
                 append($right, icons.arrowRight);
             } else {
                 append($left, icons.check);

packages/artplayer/src/setting/playbackRate.js

@@ -1,8 +1,10 @@
 export default function playbackRate(art) {
-    const { i18n } = art;
+    const { i18n, icons } = art;
+
     return {
         width: 150,
         html: i18n.get('Play speed'),
+        icon: icons.playbackRate,
         items: [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0].map((item) => {
             return {
                 html: item === 1.0 ? i18n.get('Normal') : item,

packages/artplayer/src/setting/subtitleOffset.js

@@ -1,9 +1,10 @@
 export default function subtitleOffset(art) {
-    const { i18n } = art;
+    const { i18n, icons } = art;
 
     return {
         width: 150,
         html: i18n.get('Subtitle offset time'),
+        icon: icons.subtitle,
         items: [-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5].map((item) => {
             return {
                 html: item === 0 ? i18n.get('Normal') : item,

packages/artplayer/src/style/setting.scss

@@ -55,6 +55,12 @@
                 .art-setting-item-left {
                     display: flex;
                     align-items: center;
+
+                    .art-setting-item-left-icon {
+                        height: 24px;
+                        width: 24px;
+                        margin-right: 5px;
+                    }
                 }
 
                 .art-setting-item-right {