update icons angular

package.json

@@ -11,8 +11,6 @@
     "lint": "tslint src/**/*.ts && stylelint src/**/*.scss --config .stylelintrc.yml",
     "test": "ng test --no-watch",
     "test:watch": "ng test --watch",
-    "utils:add": "git subtree add --prefix=src/utils git@github.ibm.com:peretz/utils.git master --squash",
-    "utils:update": "git subtree pull --prefix=src/utils git@github.ibm.com:peretz/utils.git master --squash",
     "build-storybook": "build-storybook -c .storybook -s .storybook/public -o dist/docs/storybook",
     "semantic-release": "semantic-release",
     "commit": "git-cz",
@@ -60,7 +58,7 @@
     "rxjs": "^6.0.0",
     "zone.js": "^0.8.26 || ^0.9.0",
     "carbon-components": "^10.0.0",
-    "@carbon/icons-angular": "^10.1.0"
+    "@carbon/icons-angular": "^11.0.0"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "0.13.9",
@@ -76,7 +74,7 @@
     "@angular/platform-browser-dynamic": "7.2.16",
     "@angular/router": "7.2.16",
     "@babel/core": "7.4.3",
-    "@carbon/icons-angular": "10.8.0",
+    "@carbon/icons-angular": "11.0.0",
     "@commitlint/cli": "8.3.5",
     "@commitlint/config-conventional": "8.3.4",
     "@compodoc/compodoc": "1.1.7",
@@ -95,7 +93,7 @@
     "carbon-components": "10.9.2",
     "codelyzer": "5.0.0",
     "commitizen": "4.0.3",
-    "core-js": "3.1.3",
+    "core-js": "2.6.11",
     "css-loader": "2.1.1",
     "cz-conventional-changelog-components": "1.0.0",
     "element-closest-polyfill": "1.0.0",
@@ -140,7 +138,8 @@
     "webpack-dev-server": "3.2.1",
     "webpack-node-externals": "1.7.2",
     "whatwg-fetch": "3.0.0",
-    "zone.js": "0.8.26"
+    "zone.js": "0.8.26",
+    "autoprefixer": "8.6.5"
   },
   "dependencies": {
     "@carbon/utils-position": "1.1.3",

src/accordion/accordion-item.component.ts

@@ -14,7 +14,7 @@ import {
 			[attr.aria-controls]="id"
 			(click)="toggleExpanded()"
 			class="bx--accordion__heading">
-			<ibm-icon-chevron-right16 class="bx--accordion__arrow"></ibm-icon-chevron-right16>
+			<ibm-icon-chevron-right size="16" class="bx--accordion__arrow"></ibm-icon-chevron-right>
 			<p
 				class="bx--accordion__title"
 				[ngClass]="{

src/accordion/accordion.component.spec.ts

@@ -2,7 +2,7 @@ import { TestBed } from "@angular/core/testing";
 import { FormsModule } from "@angular/forms";
 import { By } from "@angular/platform-browser";
 import { Component } from "@angular/core";
-import { ChevronRight16Module } from "@carbon/icons-angular/lib/chevron--right/16";
+import { ChevronRightModule } from "@carbon/icons-angular";
 import { AccordionItem } from "./accordion-item.component";
 import { Accordion } from "./accordion.component";
 
@@ -32,7 +32,7 @@ describe("Accordion", () => {
 			],
 			imports: [
 				FormsModule,
-				ChevronRight16Module
+				ChevronRightModule
 			]
 		});
 	});

src/accordion/accordion.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
-import { ChevronRight16Module } from "@carbon/icons-angular/lib/chevron--right/16";
+import { ChevronRightModule } from "@carbon/icons-angular";
 
 import { Accordion } from "./accordion.component";
 import { AccordionItem } from "./accordion-item.component";
@@ -16,7 +16,7 @@ import { AccordionItem } from "./accordion-item.component";
 	],
 	imports: [
 		CommonModule,
-		ChevronRight16Module
+		ChevronRightModule
 	]
 })
 export class AccordionModule { }

src/code-snippet/code-snippet.component.spec.ts

@@ -1,10 +1,8 @@
-import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { I18nModule } from "../i18n/index";
 
 import { CodeSnippet } from "./code-snippet.component";
-import { Copy16Module } from "@carbon/icons-angular/lib/copy/16";
-import { ChevronDown16Module } from "@carbon/icons-angular/lib/chevron--down/16";
+import { CopyModule, ChevronDownModule } from "@carbon/icons-angular";
 
 describe("CodeSnippet", () => {
 	let component: CodeSnippet;
@@ -14,10 +12,9 @@ describe("CodeSnippet", () => {
 		TestBed.configureTestingModule({
 			declarations: [CodeSnippet],
 			imports: [
-				BrowserAnimationsModule,
 				I18nModule,
-				Copy16Module,
-				ChevronDown16Module
+				CopyModule,
+				ChevronDownModule
 			]
 		});
 

src/code-snippet/code-snippet.component.ts

@@ -50,7 +50,7 @@ export enum SnippetType {
 				[attr.aria-label]="translations.COPY_CODE"
 				(click)="onCopyButtonClicked()"
 				tabindex="0">
-				<ibm-icon-copy16 class="bx--snippet__icon"></ibm-icon-copy16>
+				<ibm-icon-copy size="16" class="bx--snippet__icon"></ibm-icon-copy>
 				<ng-container *ngTemplateOutlet="feedbackTemplate"></ng-container>
 			</button>
 			<button
@@ -59,7 +59,7 @@ export enum SnippetType {
 				(click)="toggleSnippetExpansion()"
 				type="button">
 				<span class="bx--snippet-btn--text">{{expanded ? translations.SHOW_LESS : translations.SHOW_MORE}}</span>
-				<ibm-icon-chevron-down16 class="bx--icon-chevron--down" [ariaLabel]="translations.SHOW_MORE_ICON"></ibm-icon-chevron-down16>
+				<ibm-icon-chevron-down size="16" class="bx--icon-chevron--down" [ariaLabel]="translations.SHOW_MORE_ICON"></ibm-icon-chevron-down>
 			</button>
 		</ng-template>
 

src/code-snippet/code-snippet.module.ts

@@ -2,8 +2,7 @@
 import { NgModule } from "@angular/core";
 import { FormsModule } from "@angular/forms";
 import { CommonModule } from "@angular/common";
-import { Copy16Module } from "@carbon/icons-angular/lib/copy/16";
-import { ChevronDown16Module } from "@carbon/icons-angular/lib/chevron--down/16";
+import { CopyModule, ChevronDownModule } from "@carbon/icons-angular";
 
 import { I18nModule } from "../i18n/index";
 
@@ -21,8 +20,8 @@ import { CodeSnippet } from "./code-snippet.component";
 		CommonModule,
 		FormsModule,
 		I18nModule,
-		Copy16Module,
-		ChevronDown16Module
+		CopyModule,
+		ChevronDownModule
 	]
 })
 export class CodeSnippetModule { }

src/combobox/combobox.component.spec.ts

@@ -1,9 +1,11 @@
 import { Component } from "@angular/core";
 import { TestBed } from "@angular/core/testing";
 import { By	} from "@angular/platform-browser";
-import { ChevronDown16Module } from "@carbon/icons-angular/lib/chevron--down/16";
-import { WarningFilled16Module } from "@carbon/icons-angular/lib/warning--filled/16";
-import { Close16Module } from "@carbon/icons-angular/lib/close/16";
+import {
+	ChevronDownModule,
+	WarningFilledModule,
+	CloseModule
+} from "@carbon/icons-angular";
 import { I18nModule } from "../i18n/index";
 
 import { ListItem } from "./../dropdown/list-item.interface";
@@ -43,9 +45,9 @@ describe("Combo box", () => {
 				ScrollableList
 			],
 			imports: [
-				ChevronDown16Module,
-				WarningFilled16Module,
-				Close16Module,
+				ChevronDownModule,
+				WarningFilledModule,
+				CloseModule,
 				I18nModule,
 				FormsModule
 			]

src/combobox/combobox.component.ts

@@ -88,7 +88,7 @@ import { filter } from "rxjs/operators";
 					aria-haspopup="true"
 					autocomplete="off"
 					[placeholder]="placeholder"/>
-				<ibm-icon-warning-filled16 *ngIf="invalid" class="bx--list-box__invalid-icon"></ibm-icon-warning-filled16>
+				<ibm-icon-warning-filled size="16" *ngIf="invalid" class="bx--list-box__invalid-icon"></ibm-icon-warning-filled>
 				<div
 					*ngIf="showClearButton"
 					role="button"
@@ -97,13 +97,13 @@ import { filter } from "rxjs/operators";
 					aria-label="Clear Selection"
 					title="Clear selected item"
 					(click)="clearInput($event)">
-					<ibm-icon-close16></ibm-icon-close16>
+					<ibm-icon-close size="16"></ibm-icon-close>
 				</div>
-				<ibm-icon-chevron-down16
+				<ibm-icon-chevron-down size="16"
 					[ngClass]="{'bx--list-box__menu-icon--open': open}"
 					class="bx--list-box__menu-icon"
 					ariaLabel="Close menu">
-				</ibm-icon-chevron-down16>
+				</ibm-icon-chevron-down>
 			</div>
 			<div
 				#dropdownMenu

src/combobox/combobox.module.ts

@@ -1,8 +1,10 @@
 import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
-import { ChevronDown16Module } from "@carbon/icons-angular/lib/chevron--down/16";
-import { Close16Module } from "@carbon/icons-angular/lib/close/16";
-import { WarningFilled16Module } from "@carbon/icons-angular/lib/warning--filled/16";
+import {
+	ChevronDownModule,
+	CloseModule,
+	WarningFilledModule
+} from "@carbon/icons-angular";
 
 import { ComboBox } from "./combobox.component";
 import { DropdownModule } from "../dropdown/dropdown.module";
@@ -18,9 +20,9 @@ import { DropdownModule } from "../dropdown/dropdown.module";
 	imports: [
 		CommonModule,
 		DropdownModule,
-		ChevronDown16Module,
-		Close16Module,
-		WarningFilled16Module
+		ChevronDownModule,
+		CloseModule,
+		WarningFilledModule
 	]
 })
 export class ComboBoxModule {}

src/content-switcher/content-switcher.component.spec.ts

@@ -2,7 +2,7 @@ import { TestBed } from "@angular/core/testing";
 import { By } from "@angular/platform-browser";
 import { Component } from "@angular/core";
 import { ContentSwitcher } from "./content-switcher.component";
-import { ContentSwitcherModule, ContentSwitcherOption } from "./content-switcher.module";
+import { ContentSwitcherModule, ContentSwitcherOption } from "./index";
 
 @Component({
 	template: `

src/datepicker-input/datepicker-input.component.spec.ts

@@ -3,7 +3,7 @@ import { By } from "@angular/platform-browser";
 import { FormsModule } from "@angular/forms";
 import { Component } from "@angular/core";
 import { DatePickerInput } from "./datepicker-input.component";
-import { Calendar16Module } from "@carbon/icons-angular/lib/calendar/16";
+import { CalendarModule } from "@carbon/icons-angular";
 import { CommonModule } from "@angular/common";
 
 @Component({
@@ -40,7 +40,7 @@ describe("Select", () => {
 			],
 			imports: [
 				CommonModule,
-				Calendar16Module,
+				CalendarModule,
 				FormsModule
 			]
 		});

src/datepicker-input/datepicker-input.component.ts

@@ -38,8 +38,7 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms";
 						[id]= "id"
 						[disabled]="disabled"
 						(change)="onChange($event)"/>
-						<ibm-icon-calendar16 class="bx--date-picker__icon">
-						</ibm-icon-calendar16>
+						<ibm-icon-calendar size="16" class="bx--date-picker__icon"></ibm-icon-calendar>
 				</div>
 				<div *ngIf="invalid" class="bx--form-requirement">
 					<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>

src/datepicker-input/datepicker-input.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { DatePickerInput } from "./datepicker-input.component";
-import { Calendar16Module } from "@carbon/icons-angular/lib/calendar/16";
+import { CalendarModule } from "@carbon/icons-angular";
 
 @NgModule({
 	declarations: [
@@ -12,7 +12,7 @@ import { Calendar16Module } from "@carbon/icons-angular/lib/calendar/16";
 	],
 	imports: [
 		CommonModule,
-		Calendar16Module
+		CalendarModule
 	]
 })
 export class DatePickerInputModule { }

src/datepicker/datepicker.component.spec.ts

@@ -3,7 +3,7 @@ import { By } from "@angular/platform-browser";
 import { Component } from "@angular/core";
 import { DatePicker } from "./datepicker.component";
 import { DatePickerInput } from "../datepicker-input/datepicker-input.component";
-import { Calendar16Module } from "@carbon/icons-angular/lib/calendar/16";
+import { CalendarModule } from "@carbon/icons-angular";
 import { FormsModule } from "@angular/forms";
 import { UtilsModule } from "../utils/utils.module";
 
@@ -39,7 +39,7 @@ describe("DatePicker", () => {
 				DatePickerInput
 			],
 			imports: [
-				Calendar16Module,
+				CalendarModule,
 				UtilsModule,
 				FormsModule
 			]

src/datepicker/datepicker.stories.ts

@@ -24,7 +24,6 @@ import { DatePickerModule, DocumentationModule } from "../";
 import { ButtonModule } from "../forms/forms.module";
 import { TabsModule } from "../tabs/tabs.module";
 import { ModalModule } from "../modal/modal.module";
-import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 
 const modalText =
 	`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non egestas neque.
@@ -129,7 +128,6 @@ storiesOf("Components|Date Picker", module)
 				ReactiveFormsModule,
 				DocumentationModule,
 				ButtonModule,
-				BrowserAnimationsModule,
 				TabsModule,
 				ModalModule
 			],

src/dialog/tooltip/tooltip.stories.ts

@@ -2,7 +2,7 @@ import { storiesOf, moduleMetadata } from "@storybook/angular";
 import { action } from "@storybook/addon-actions";
 import { withKnobs, text, select } from "@storybook/addon-knobs/angular";
 
-import { InformationFilled16Module } from "@carbon/icons-angular/lib/information--filled/16";
+import { InformationFilledModule } from "@carbon/icons-angular";
 import { DialogModule, PlaceholderModule, DocumentationModule } from "../../";
 
 storiesOf("Components|Tooltip", module)
@@ -11,7 +11,7 @@ storiesOf("Components|Tooltip", module)
 			imports: [
 				DialogModule,
 				PlaceholderModule,
-				InformationFilled16Module,
+				InformationFilledModule,
 				DocumentationModule
 			]
 		})
@@ -36,7 +36,7 @@ storiesOf("Components|Tooltip", module)
 						trigger="click"
 						[placement]="placement">
 						<div role="button">
-							<ibm-icon-information-filled16></ibm-icon-information-filled16>
+							<ibm-icon-information-filled size="16"></ibm-icon-information-filled>
 						</div>
 					</span>
 				</div>

src/dropdown/dropdown.component.spec.ts

@@ -9,10 +9,9 @@ import { ScrollableList } from "./scrollable-list.directive";
 import { I18nModule } from "../i18n/index";
 import { DropdownService } from "./dropdown.service";
 import { PlaceholderModule } from "./../placeholder/index";
-import { ChevronDown16Module } from "@carbon/icons-angular/lib/chevron--down/16";
 import { FormsModule } from "@angular/forms";
-import { WarningFilled16Module } from "@carbon/icons-angular/lib/warning--filled/16";
 import { UtilsModule } from "../utils/utils.module";
+import { ChevronDownModule, WarningFilledModule } from "@carbon/icons-angular";
 
 @Component({
 	template: `
@@ -44,9 +43,9 @@ describe("Dropdown", () => {
 			imports: [
 				I18nModule,
 				PlaceholderModule,
-				ChevronDown16Module,
+				ChevronDownModule,
 				FormsModule,
-				WarningFilled16Module,
+				WarningFilledModule,
 				UtilsModule
 			],
 			providers: [ DropdownService ]

src/dropdown/dropdown.component.ts

@@ -97,12 +97,13 @@ import { ElementService } from "./../utils/utils.module";
 				*ngIf="invalid"
 				class="bx--dropdown__invalid-icon">
 			</svg>
-			<ibm-icon-chevron-down16
+			<ibm-icon-chevron-down
+				size="16"
 				*ngIf="!skeleton"
 				class="bx--list-box__menu-icon"
 				[attr.aria-label]="menuButtonLabel"
 				[ngClass]="{'bx--list-box__menu-icon--open': !menuIsClosed }">
-			</ibm-icon-chevron-down16>
+			</ibm-icon-chevron-down>
 		</div>
 		<div
 			#dropdownMenu