Add left / right props to icon (#2)

* Add left / right props to icon

* Remove wrong size class import

src/components/v-icon/v-icon.readme.md

@@ -28,6 +28,15 @@ You can render the outline variant of the Material Icon by setting the `outline`
 ## Click events
 When you add a click event to the icon, the icon will automatically add a pointer cursor.
 
+## Left / Right
+Oftentimes, you'll use the icon next to some text, for example in a button. When doing this, you can use the `left` / `right` props to add some spacing to the icon:
+
+```html
+<v-button>
+	<v-icon name="add" left> Add new
+</v-button>
+```
+
 ## Props
 | Name      | Description                                                       | Default        |
 |-----------|-------------------------------------------------------------------|----------------|
@@ -39,6 +48,8 @@ When you add a click event to the icon, the icon will automatically add a pointe
 | `small`   | Render the icon small                                             | `false`        |
 | `large`   | Render the icon large                                             | `false`        |
 | `x-large` | Render the icon extra large                                       | `false`        |
+| `left`    | Use when icon is left of text                                     | `false`        |
+| `right`   | Use when icon is right of text                                    | `false`        |
 
 ## Events
 | Event   | Description          | Data         |

src/components/v-icon/v-icon.story.ts

@@ -86,3 +86,16 @@ export const withClickEvent = () => ({
 <v-icon name="star" @click="click" />
 `
 });
+
+export const leftRight = () => ({
+	template: `
+<div style="display: flex">
+<v-button style="margin-right: 2rem;">
+	<v-icon name="add" left /> Add
+</v-button>
+<v-button>
+	Remove <v-icon name="remove" right />
+</v-button>
+</div>
+`
+});

src/components/v-icon/v-icon.test.ts

@@ -144,6 +144,21 @@ describe('Icon', () => {
 		expect(component.classes()).toContain('has-click');
 	});
 
+	it('Sets the left / right classes if props are given', async () => {
+		component.setProps({
+			left: true
+		});
+		await component.vm.$nextTick();
+		expect(component.classes()).toContain('left');
+
+		component.setProps({
+			left: false,
+			right: true
+		});
+		await component.vm.$nextTick();
+		expect(component.classes()).toContain('right');
+	});
+
 	it('Emits the click event on click of the icon', () => {
 		component.find('span').trigger('click');
 		expect(component.emitted('click')).toBeTruthy();

src/components/v-icon/v-icon.vue

@@ -1,7 +1,7 @@
 <template>
 	<span
 		class="v-icon"
-		:class="[sizeClass, { 'has-click': hasClick }]"
+		:class="[sizeClass, { 'has-click': hasClick, left, right }]"
 		:style="{ color: colorStyle, width: customSize, height: customSize }"
 		:role="hasClick ? 'button' : null"
 		@click="emitClick"
@@ -56,6 +56,14 @@ export default createComponent({
 		xLarge: {
 			type: Boolean,
 			default: false
+		},
+		left: {
+			type: Boolean,
+			default: false
+		},
+		right: {
+			type: Boolean,
+			default: false
 		}
 	},
 
@@ -159,6 +167,16 @@ export default createComponent({
 		}
 	}
 
+	&.left {
+		margin-right: 8px;
+		margin-left: -4px;
+	}
+
+	&.right {
+		margin-left: 8px;
+		margin-right: -4px;
+	}
+
 	i {
 		font-size: 24px;
 		font-family: 'Material Icons';