Update step-1.mdx (#3071)

* Update step-1.mdx

Hi,
it took me quiet some time to run the step-1 part of the tutorial, the section about icons namely.
After digging into documentation of `carbon-component-angular` module I was able to make the icons working properly.
Therefore you would like to propose couple changes in this part of the step-1 documentation.

* Update step-1.mdx

Forgot to mention the registration of the icon/s so adding that part as well.

* Update src/pages/developing/angular-tutorial/step-1.mdx

ok, thx

Co-authored-by: Akshat Patel <[email protected]>

* Update src/pages/developing/angular-tutorial/step-1.mdx

ok thx

Co-authored-by: Akshat Patel <[email protected]>

* Update src/pages/developing/angular-tutorial/step-1.mdx

ok thx

Co-authored-by: Akshat Patel <[email protected]>

Co-authored-by: Akshat Patel <[email protected]>
Co-authored-by: D.A. Kahn <[email protected]>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

src/pages/developing/angular-tutorial/step-1.mdx

@@ -302,33 +302,47 @@ package.
 
 #### Import and register icons
 
-Now let's import the icons from our `@carbon/icons` package. In `app.module.ts`,
-`app.component.spec.ts` and `header.component.spec.ts`, we need to import each
-individual icon we will use and register them with the `IconService`
+Now let’s import the icons from our `@carbon/icons` package. To improve tree shaking & keep the size of our app small, import only the required icons. To do so, import `Notification20`, `UserAvatar20`, and `AppSwitcher20` in `app.module.ts`.
 
 <!-- prettier-ignore-start -->
-```javascript path=src/app/app.module.ts,src/app/app.component.spec.ts,src/app/header/header.component.spec.ts
+```javascript path=src/app/header/app.modules.ts
 import Notification20 from '@carbon/icons/es/notification/20';
 import UserAvatar20 from '@carbon/icons/es/user--avatar/20';
 import AppSwitcher20 from '@carbon/icons/es/app-switcher/20';
 ```
 <!-- prettier-ignore-end -->
 
-In the `AppModule` class we'll add a constructor that provides us with an
-instance of `IconService` and call `registerAll` with an array of the icons we
-need to use.
+Now you need to register the icon via `IconService` that also needs to be imported from `carbon-components-angular` module.
+After importing IconService you need to inject it in component constructor and us it in OnInit life cycle component hook. There are 2 methods for icon registration `.register()` which accepts only one icon and `.registerAll()` which accepts array of icons. As we are going to use more than one icon we are going to use the later method as below.
 
-```javascript path=src/app/app.module.ts,src/app/app.component.spec.ts,src/app/header/header.component.spec.ts
-constructor(protected iconService: IconService) {
-  iconService.registerAll([
-    Notification20,
-    UserAvatar20,
-    AppSwitcher20
-  ]);
-}
+<!-- prettier-ignore-start -->
+```javascript path=src/app/header/header.component.ts
+import { IconService } from "carbon-components-angular";
+...
+
+constructor(protected iconService: IconService) {}
+
+  ngOnInit() {
+    this.iconService.registerAll([Notification20]);
+  }
+```
+<!-- prettier-ignore-end -->
+
+Next step is to import the `IconModule` in the `AppModule` module where the `HeaderComponent` is declared.
+
+<!-- prettier-ignore-start -->
+```javascript path=src/app/header/header.component.ts
+import { IconModule } from "carbon-components-angular";
+...
+
+imports: [
+  ...
+  IconModule
+]
 ```
+<!-- prettier-ignore-end -->
 
-Then we need to add the template code. Populate `header.component.html` with:
+Now the icon is ready to be used in template code. Template in `header.component.html` should look like this:
 
 <!-- prettier-ignore-start -->
 ```html path=src/app/header/header.component.html