diff --git a/demo/src/app/app.component.ts b/demo/src/app/app.component.ts
index 5ac51189e..fb9933c26 100644
--- a/demo/src/app/app.component.ts
+++ b/demo/src/app/app.component.ts
@@ -1,5 +1,5 @@
 import { Component, HostBinding } from "@angular/core";
-import { SuiPopupConfig } from "ng2-semantic-ui";
+import { SuiPopupConfig } from "../../../src";
 
 @Component({
     selector: "demo-root",
diff --git a/demo/src/app/app.module.ts b/demo/src/app/app.module.ts
index d178e329a..f8106d6e1 100644
--- a/demo/src/app/app.module.ts
+++ b/demo/src/app/app.module.ts
@@ -2,7 +2,7 @@ import { BrowserModule } from "@angular/platform-browser";
 import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { FormsModule } from "@angular/forms";
-import { SuiSidebarModule, SuiPopupModule } from "ng2-semantic-ui";
+import { SuiSidebarModule, SuiPopupModule } from "../../../src";
 
 import { DemoRoutingModule } from "./app.routing";
 import { DemoComponentsModule } from "./components/demo-components.module";
diff --git a/demo/src/app/components/demo-components.module.ts b/demo/src/app/components/demo-components.module.ts
index 16c71e199..aa606a31f 100644
--- a/demo/src/app/components/demo-components.module.ts
+++ b/demo/src/app/components/demo-components.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { RouterModule } from "@angular/router";
-import { SuiCollapseModule, SuiPopupModule } from "ng2-semantic-ui";
+import { SuiCollapseModule, SuiPopupModule } from "../../../../src";
 
 import { ApiComponent } from "./api/api.component";
 import { CodeblockComponent } from "./codeblock/codeblock.component";
diff --git a/demo/src/app/modals/alert.modal.ts b/demo/src/app/modals/alert.modal.ts
index fdd0c17e9..7734bab3a 100644
--- a/demo/src/app/modals/alert.modal.ts
+++ b/demo/src/app/modals/alert.modal.ts
@@ -1,5 +1,5 @@
 import { Component } from "@angular/core";
-import { SuiModal, ComponentModalConfig, ModalSize } from "ng2-semantic-ui";
+import { Modal, ComponentModalConfig, ModalSize } from "../../../../src";
 
 interface IAlertModalContext {
     message:string;
@@ -19,7 +19,7 @@ interface IAlertModalContext {
 `
 })
 export class AlertModalComponent {
-    constructor(public modal:SuiModal<IAlertModalContext, void, void>) {}
+    constructor(public modal:Modal<IAlertModalContext, void, void>) {}
 }
 
 export class AlertModal extends ComponentModalConfig<IAlertModalContext, void, void> {
diff --git a/demo/src/app/modals/confirm.modal.ts b/demo/src/app/modals/confirm.modal.ts
index 8d11a5f28..09f97c277 100644
--- a/demo/src/app/modals/confirm.modal.ts
+++ b/demo/src/app/modals/confirm.modal.ts
@@ -1,5 +1,5 @@
 import { Component } from "@angular/core";
-import { SuiModal, ComponentModalConfig, ModalSize } from "ng2-semantic-ui";
+import { ComponentModalConfig, ModalSize, Modal } from "../../../../src";
 
 interface IConfirmModalContext {
     question:string;
@@ -20,7 +20,7 @@ interface IConfirmModalContext {
 `
 })
 export class ConfirmModalComponent {
-    constructor(public modal:SuiModal<IConfirmModalContext, void, void>) {}
+    constructor(public modal:Modal<IConfirmModalContext, void, void>) {}
 }
 
 export class ConfirmModal extends ComponentModalConfig<IConfirmModalContext, void, void> {
diff --git a/demo/src/app/modals/demo-modals.module.ts b/demo/src/app/modals/demo-modals.module.ts
index 80abf6dd5..4d2b89282 100644
--- a/demo/src/app/modals/demo-modals.module.ts
+++ b/demo/src/app/modals/demo-modals.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
-import { SuiModalModule } from "ng2-semantic-ui";
+import { SuiModalModule } from "../../../../src";
 import { AlertModalComponent } from "./alert.modal";
 import { ConfirmModalComponent } from "./confirm.modal";
 
diff --git a/demo/src/app/pages/behaviors/localization/localization.page.ts b/demo/src/app/pages/behaviors/localization/localization.page.ts
index 070ce38ac..06b62f6c8 100644
--- a/demo/src/app/pages/behaviors/localization/localization.page.ts
+++ b/demo/src/app/pages/behaviors/localization/localization.page.ts
@@ -1,6 +1,6 @@
 import { Component, OnDestroy } from "@angular/core";
-import { SuiLocalizationService } from "ng2-semantic-ui";
-import locales from "ng2-semantic-ui/locales";
+import { SuiLocalizationService } from "../../../../../../src";
+import locales from "../../../../../../src/behaviors/localization/locales";
 
 const exampleTemplate = `
 <div class="ui segments">
diff --git a/demo/src/app/pages/demo-pages.module.ts b/demo/src/app/pages/demo-pages.module.ts
index 1c6efb18d..c51c2cafd 100644
--- a/demo/src/app/pages/demo-pages.module.ts
+++ b/demo/src/app/pages/demo-pages.module.ts
@@ -2,7 +2,7 @@ import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { RouterModule } from "@angular/router";
-import { SuiModule } from "ng2-semantic-ui";
+import { SuiModule } from "../../../../src";
 import { DemoComponentsModule } from "../components/demo-components.module";
 
 import { GettingStartedPage } from "./getting-started/getting-started.page";
diff --git a/demo/src/app/pages/modules/datepicker/datepicker.page.ts b/demo/src/app/pages/modules/datepicker/datepicker.page.ts
index cde1ad3c2..da7fb7138 100644
--- a/demo/src/app/pages/modules/datepicker/datepicker.page.ts
+++ b/demo/src/app/pages/modules/datepicker/datepicker.page.ts
@@ -1,6 +1,6 @@
 import { Component } from "@angular/core";
 import { ApiDefinition } from "../../../components/api/api.component";
-import { DatepickerMode } from "ng2-semantic-ui";
+import { DatepickerMode } from "../../../../../../src";
 
 const exampleStandardTemplate = `
 <div class="ui form">
diff --git a/demo/src/app/pages/modules/modal/modal.page.ts b/demo/src/app/pages/modules/modal/modal.page.ts
index deb0d4613..ba236fe1b 100644
--- a/demo/src/app/pages/modules/modal/modal.page.ts
+++ b/demo/src/app/pages/modules/modal/modal.page.ts
@@ -2,8 +2,8 @@ import { Component, ViewChild } from "@angular/core";
 import { ApiDefinition } from "../../../components/api/api.component";
 import {
     SuiModalService, ModalTemplate, TemplateModalConfig, ComponentModalConfig,
-    ModalSize, SuiModal
-} from "ng2-semantic-ui";
+    ModalSize, Modal
+} from "../../../../../../src";
 import { AlertModal } from "../../../modals/alert.modal";
 
 const exampleTemplateModalTemplate = `
@@ -266,7 +266,7 @@ interface IConfirmModalContext {
     template: exampleComponentModalTemplate
 })
 export class ConfirmModalComponent {
-    constructor(public modal:SuiModal<IConfirmModalContext, void, void>) {}
+    constructor(public modal:Modal<IConfirmModalContext, void, void>) {}
 }
 
 export class ConfirmModal extends ComponentModalConfig<IConfirmModalContext, void, void> {
diff --git a/demo/src/app/pages/modules/popup/popup.page.ts b/demo/src/app/pages/modules/popup/popup.page.ts
index 00fb1454e..93640bf82 100644
--- a/demo/src/app/pages/modules/popup/popup.page.ts
+++ b/demo/src/app/pages/modules/popup/popup.page.ts
@@ -1,6 +1,6 @@
 import { Component, Input } from "@angular/core";
 import { ApiDefinition } from "../../../components/api/api.component";
-import { SuiPopupConfig } from "ng2-semantic-ui";
+import { SuiPopupConfig } from "../../../../../../src";
 
 const exampleStandardTemplate = `
 <button class="ui green icon button" suiPopup popupHeader="Example" popupText="This is an example popup">
diff --git a/demo/src/app/pages/modules/search/search.page.ts b/demo/src/app/pages/modules/search/search.page.ts
index 230efdd18..0f9749216 100644
--- a/demo/src/app/pages/modules/search/search.page.ts
+++ b/demo/src/app/pages/modules/search/search.page.ts
@@ -1,6 +1,6 @@
 import { Component } from "@angular/core";
 import { ApiDefinition } from "../../../components/api/api.component";
-import { SuiModalService } from "ng2-semantic-ui";
+import { SuiModalService } from "../../../../../../src";
 import { AlertModal } from "../../../modals/alert.modal";
 
 const exampleStandardTemplate = `
diff --git a/demo/src/app/pages/modules/select/select.page.html b/demo/src/app/pages/modules/select/select.page.html
index dd86fb75e..9d201d7b5 100644
--- a/demo/src/app/pages/modules/select/select.page.html
+++ b/demo/src/app/pages/modules/select/select.page.html
@@ -39,6 +39,14 @@ <h4 class="ui header">Variations</h4>
         <example-select-variations result></example-select-variations>
     </demo-example>
 
+    <demo-example [code]="exampleClearableTemplate">
+        <div info>
+            <h4 class="ui header">Clearable select</h4>
+            <p>A select can have a "clear" icon to reset the selected value. It's useful if you want to use a <code>SuiSelect</code> as filter</p>
+        </div>
+        <example-clearable-select result></example-clearable-select>
+    </demo-example>
+
     <demo-example [code]="exampleInMenuSearchTemplate">
         <div info>
             <h4 class="ui header">Search In-Menu</h4>
diff --git a/demo/src/app/pages/modules/select/select.page.ts b/demo/src/app/pages/modules/select/select.page.ts
index 84db911aa..78b9ffb49 100644
--- a/demo/src/app/pages/modules/select/select.page.ts
+++ b/demo/src/app/pages/modules/select/select.page.ts
@@ -91,6 +91,18 @@ const exampleVariationsTemplate = `
 </div>
 `;
 
+const exampleClearableTemplate = `
+<sui-select class="selection"
+            [(ngModel)]="selectedOption"
+            [options]="filters"
+            [isClearable]="true"
+            #select>
+    <sui-select-option *ngFor="let option of select.filteredOptions"
+                       [value]="option">
+    </sui-select-option>
+</sui-select>
+`;
+
 const exampleInMenuSearchTemplate = `
 <sui-multi-select [(ngModel)]="selected"
                   [options]="options"
@@ -221,6 +233,12 @@ export class SelectPage {
                     description: "Sets whether the multi select is searchable.",
                     defaultValue: "false"
                 },
+                {
+                    name: "isСlearable",
+                    type: "boolean",
+                    description: "Sets whether the select is clearable.",
+                    defaultValue: "false"
+                },
                 {
                     name: "optionFormatter",
                     type: "(result:T, query?:string) => string",
@@ -408,6 +426,7 @@ export class SelectPage {
     ];
     public exampleStandardTemplate:string = exampleStandardTemplate;
     public exampleVariationsTemplate:string = exampleVariationsTemplate;
+    public exampleClearableTemplate:string = exampleClearableTemplate;
     public exampleInMenuSearchTemplate:string = exampleInMenuSearchTemplate;
     public exampleTemplateTemplate:string = exampleTemplateTemplate;
     public formatterCode:string = `
@@ -468,6 +487,15 @@ export class SelectExampleVariations {
     public filters:string[] = ["Important", "Announcement", "Discussion"];
 }
 
+@Component({
+    selector: "example-clearable-select",
+    template: exampleClearableTemplate
+})
+export class SelectClearableExample {
+    public selectedOption:string;
+    public filters:string[] = ["Important", "Announcement", "Discussion"];
+}
+
 @Component({
     selector: "example-select-in-menu-search",
     template: exampleInMenuSearchTemplate
@@ -520,6 +548,7 @@ export const SelectPageComponents = [
 
     SelectExampleStandard,
     SelectExampleVariations,
+    SelectClearableExample,
     SelectExampleInMenuSearch,
     SelectExampleTemplate,
     SelectExampleLookupSearch
diff --git a/demo/src/app/pages/modules/tabs/tabs.page.ts b/demo/src/app/pages/modules/tabs/tabs.page.ts
index 77532f0dc..25e0f020b 100644
--- a/demo/src/app/pages/modules/tabs/tabs.page.ts
+++ b/demo/src/app/pages/modules/tabs/tabs.page.ts
@@ -1,6 +1,6 @@
 import { Component } from "@angular/core";
 import { ApiDefinition } from "../../../components/api/api.component";
-import { SuiModalService } from "ng2-semantic-ui";
+import { SuiModalService } from "../../../../../../src";
 import { AlertModal } from "../../../modals/alert.modal";
 
 const exampleStandardTemplate = `
diff --git a/demo/src/app/pages/modules/transition/transition.page.ts b/demo/src/app/pages/modules/transition/transition.page.ts
index cfedf5b0b..e28e03145 100644
--- a/demo/src/app/pages/modules/transition/transition.page.ts
+++ b/demo/src/app/pages/modules/transition/transition.page.ts
@@ -1,5 +1,5 @@
 import { Component } from "@angular/core";
-import { SuiTransition, Transition, TransitionDirection, TransitionController } from "ng2-semantic-ui";
+import { SuiTransition, Transition, TransitionDirection, TransitionController } from "../../../../../../src";
 import { ApiDefinition } from "../../../components/api/api.component";
 
 const exampleStandardTemplate = `
diff --git a/src/modules/select/components/select.ts b/src/modules/select/components/select.ts
index b5123e772..be912b6c9 100644
--- a/src/modules/select/components/select.ts
+++ b/src/modules/select/components/select.ts
@@ -1,5 +1,5 @@
 import { Component, ViewContainerRef, ViewChild, Output, EventEmitter, ElementRef, Directive, Input } from "@angular/core";
-import { ICustomValueAccessorHost, customValueAccessorFactory, CustomValueAccessor } from "../../../misc/util/internal";
+import { ICustomValueAccessorHost, customValueAccessorFactory, CustomValueAccessor, HandledEvent } from "../../../misc/util/internal";
 import { SuiLocalizationService } from "../../../behaviors/localization/internal";
 import { SuiSelectBase } from "../classes/select-base";
 import { SuiSelectOption } from "./select-option";
@@ -20,7 +20,8 @@ import { SuiSelectOption } from "./select-option";
     <span *ngIf="!optionTemplate && selectedOption != undefined" [innerHTML]="configuredFormatter(selectedOption)"></span>
 </div>
 <!-- Dropdown icon -->
-<i class="{{ icon }} icon" (click)="onCaretClick($event)"></i>
+<i *ngIf="selectedOption && !isSearching && isClearable" class="remove icon deselect" (click)="onRemoveClick($event)"></i>
+<i *ngIf="!selectedOption || !isClearable" class="{{ icon }} icon" (click)="onCaretClick($event)"></i>
 <!-- Select dropdown menu -->
 <div class="menu"
      suiDropdownMenu
@@ -33,7 +34,31 @@ import { SuiSelectOption } from "./select-option";
         {{ localeValues.noResultsMessage }}
     </div>
 </div>
-`
+`,
+    styles: [`
+        :host .remove.icon.deselect {
+            position: absolute;
+            width: auto;
+            height: auto;
+            line-height: 1.21428571em;
+            top: .78571429em;
+            right: 1em;
+            margin: -.78571429em;
+            opacity: .6;
+            font-size: 1.07142857em;
+            padding: .6em;
+            -webkit-transition: opacity .1s ease;
+            transition: opacity .1s ease;
+            z-index: 3;
+        }
+        :host .remove.icon.deselect.larger {
+            padding: .91666667em;
+            font-size: .85714286em;
+        }
+        :host .remove.icon.deselect:hover {
+            opacity: 1;
+        }
+    `]
 })
 export class SuiSelect<T, U> extends SuiSelectBase<T, U> implements ICustomValueAccessorHost<U> {
     public selectedOption?:T;
@@ -57,12 +82,25 @@ export class SuiSelect<T, U> extends SuiSelectBase<T, U> implements ICustomValue
         this._placeholder = placeholder;
     }
 
+    @Input()
+    public isClearable:boolean;
+
     constructor(element:ElementRef, localizationService:SuiLocalizationService) {
         super(element, localizationService);
 
+        this.isClearable = false;
         this.selectedOptionChange = new EventEmitter<U>();
     }
 
+    public onRemoveClick(e:HandledEvent):void {
+        if (!e.eventHandled) {
+            e.eventHandled = true;
+            this.selectedOption = undefined;
+            this.selectedOptionChange.emit(undefined);
+            this._renderedOptions.forEach(o => o.isActive = false);
+        }
+    }
+
     protected optionsUpdateHook():void {
         if (!this._writtenOption && this.selectedOption) {
             // We need to check the option still exists.