fix(input field): render icon correctly

src/components/input-field/input-field.mdx

@@ -24,3 +24,10 @@ menu: Components
     path="input-field"
     name="limel-example-input-field-autocomplete"
 />
+
+### Input field with icon action
+
+<limel-example
+    path="input-field"
+    name="limel-example-input-field-icon"
+/>

src/components/input-field/input-field.scss

@@ -79,3 +79,8 @@ $mdc-text-field-fullwidth-bottom-line-color: $lime-text-field-bottom-line-color;
 .mdc-list-item {
     cursor: pointer;
 }
+
+.mdc-text-field__icon {
+    width: 2.4rem;
+    height: 2.4rem;
+}

src/components/input-field/input-field.tsx

@@ -60,9 +60,7 @@ export class InputField {
     public value: string;
 
     /**
-     * This property just shows its value on the right side of the field
-     * at this moment. As soon as we have integrated a icon library it's
-     * supposed to match with an icon and display that
+     * Trailing icon to show to the far right in the field
      */
     @Prop({ reflectToAttr: true })
     public trailingIcon: string;
@@ -108,8 +106,7 @@ export class InputField {
     private change: EventEmitter;
 
     /**
-     * This event is tied to the `trailingIcon` property, which doesn't work
-     * at the moment. Don't use it.
+     * Emitted when the `trailingIcon` is set and the icon is interacted with
      */
     @Event()
     private action: EventEmitter;
@@ -191,7 +188,7 @@ export class InputField {
                 tabindex="0"
                 role="button"
             >
-                {this.trailingIcon}
+                <limel-icon name={this.trailingIcon} />
             </i>
         );
     }

src/examples/input-field/input-field-icon.tsx

@@ -0,0 +1,27 @@
+import { Component, State } from '@stencil/core';
+
+@Component({
+    tag: 'limel-example-input-field-icon',
+    shadow: true,
+})
+export class InputFieldIconExample {
+    @State()
+    private value;
+
+    public render() {
+        return (
+            <limel-input-field
+                label="Email address"
+                type="email"
+                value={this.value}
+                trailingIcon="filled_message"
+                onChange={event => {
+                    this.value = event.detail;
+                }}
+                onAction={() => {
+                    console.log(`sending email to ${this.value}`);
+                }}
+            />
+        );
+    }
+}