diff --git a/examples/docs/en-US/dropdown.md b/examples/docs/en-US/dropdown.md
index 9b66fa025..1f593d709 100644
--- a/examples/docs/en-US/dropdown.md
+++ b/examples/docs/en-US/dropdown.md
@@ -154,11 +154,11 @@ Click the triggering element or hover on it.
Dropdown List
- Action 1
- Action 2
- Action 3
- Action 4
- Action 5
+ Action 1
+ Action 2
+ Action 3
+ Action 4
+ Action 5
@@ -169,11 +169,11 @@ Click the triggering element or hover on it.
Dropdown List
- Action 1
- Action 2
- Action 3
- Action 4
- Action 5
+ Action 1
+ Action 2
+ Action 3
+ Action 4
+ Action 5
@@ -346,8 +346,9 @@ Besides default size, Dropdown component provides three additional sizes for you
| visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise |
### Dropdown Menu Item Attributes
-| Attribute | Description | Type | Accepted Values | Default |
+| Attribute | Description | Type | Accepted Values | Default |
|------------- |---------------- |---------------- |---------------------- |-------- |
| command | a command to be dispatched to Dropdown's `command` callback | string/number/object | — | — |
| disabled | whether the item is disabled | boolean | — | false |
| divided | whether a divider is displayed | boolean | — | false |
+| icon | icon class name | string | — | — |
diff --git a/examples/docs/es/dropdown.md b/examples/docs/es/dropdown.md
index f1d87f176..8ee560116 100644
--- a/examples/docs/es/dropdown.md
+++ b/examples/docs/es/dropdown.md
@@ -2,7 +2,7 @@
.demo-box {
.el-dropdown {
vertical-align: top;
-
+
& + .el-dropdown {
margin-left: 15px;
}
@@ -23,7 +23,7 @@
padding: 30px 0;
text-align: center;
border-right: 1px solid #eff2f6;
-
+
&:last-child {
border-right: 0;
}
@@ -155,11 +155,11 @@ Haga clic en el elemento detonante o sobre él.
Dropdown List
- Action 1
- Action 2
- Action 3
- Action 4
- Action 5
+ Action 1
+ Action 2
+ Action 3
+ Action 4
+ Action 5
@@ -170,11 +170,11 @@ Haga clic en el elemento detonante o sobre él.
Dropdown List
- Action 1
- Action 2
- Action 3
- Action 4
- Action 5
+ Action 1
+ Action 2
+ Action 3
+ Action 4
+ Action 5
@@ -353,3 +353,4 @@ Además del tamaño predeterminado, el componente Dropdown proporciona tres tama
| command | un comando que se enviará al `command` callback del Dropdown | string/number/object | — | — |
| disabled | si el elemento está desactivado | boolean | — | false |
| divided | si se visualiza un divisor | boolean | — | false |
+| icon | nombre de la clase del icono | string | — | — |
diff --git a/examples/docs/fr-FR/dropdown.md b/examples/docs/fr-FR/dropdown.md
index 108582099..517feb439 100644
--- a/examples/docs/fr-FR/dropdown.md
+++ b/examples/docs/fr-FR/dropdown.md
@@ -155,11 +155,11 @@ Vous pouvez choisir de déclencher le menu au moment du clic, ou en passant la s
Liste déroulante
- Action 1
- Action 2
- Action 3
- Action 4
- Action 5
+ Action 1
+ Action 2
+ Action 3
+ Action 4
+ Action 5
@@ -170,11 +170,11 @@ Vous pouvez choisir de déclencher le menu au moment du clic, ou en passant la s
Liste déroulante
- Action 1
- Action 2
- Action 3
- Action 4
- Action 5
+ Action 1
+ Action 2
+ Action 3
+ Action 4
+ Action 5
@@ -356,3 +356,4 @@ En plus de la taille par défaut, le composant Dropdown propose trois autres tai
| command | Le contenu a envoyer à la callback de l'évènement `command` du Dropdown. | string/number/object | — | — |
| disabled | Si l'élément est désactivé. | boolean | — | false |
| divided | Si un diviseur doit être affiché. | boolean | — | false |
+| icon | Classe de l'icône. | string | — | — |
diff --git a/examples/docs/zh-CN/dropdown.md b/examples/docs/zh-CN/dropdown.md
index 45c0cd45c..cdcee4158 100644
--- a/examples/docs/zh-CN/dropdown.md
+++ b/examples/docs/zh-CN/dropdown.md
@@ -156,11 +156,11 @@
下拉菜单
- 黄金糕
- 狮子头
- 螺蛳粉
- 双皮奶
- 蚵仔煎
+ 黄金糕
+ 狮子头
+ 螺蛳粉
+ 双皮奶
+ 蚵仔煎
@@ -171,11 +171,11 @@
下拉菜单
- 黄金糕
- 狮子头
- 螺蛳粉
- 双皮奶
- 蚵仔煎
+ 黄金糕
+ 狮子头
+ 螺蛳粉
+ 双皮奶
+ 蚵仔煎
@@ -357,3 +357,4 @@ Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场
| command | 指令 | string/number/object | — | — |
| disabled | 禁用 | boolean | — | false |
| divided | 显示分割线 | boolean | — | false |
+| icon | 图标类名 | string | — | — |
diff --git a/packages/dropdown/src/dropdown-item.vue b/packages/dropdown/src/dropdown-item.vue
index 9af930a68..9fc33d8c3 100644
--- a/packages/dropdown/src/dropdown-item.vue
+++ b/packages/dropdown/src/dropdown-item.vue
@@ -9,6 +9,7 @@
:aria-disabled="disabled"
:tabindex="disabled ? null : -1"
>
+
@@ -23,7 +24,8 @@
props: {
command: {},
disabled: Boolean,
- divided: Boolean
+ divided: Boolean,
+ icon: String
},
methods: {
diff --git a/packages/theme-chalk/src/dropdown.scss b/packages/theme-chalk/src/dropdown.scss
index 5871f83d1..72e834050 100644
--- a/packages/theme-chalk/src/dropdown.scss
+++ b/packages/theme-chalk/src/dropdown.scss
@@ -84,6 +84,10 @@
color: $--dropdown-menuItem-hover-color;
}
+ i {
+ margin-right: 5px;
+ }
+
@include m(divided) {
$divided-offset: 6px;
diff --git a/types/dropdown-item.d.ts b/types/dropdown-item.d.ts
index 0fb9b451a..767142414 100644
--- a/types/dropdown-item.d.ts
+++ b/types/dropdown-item.d.ts
@@ -10,4 +10,7 @@ export declare class ElDropdownItem extends ElementUIComponent {
/** Whether a divider is displayed */
divided: boolean
+
+ /** Icon to show on left side of text */
+ icon: string
}