mat-icons are not loading properly

[noble atlas]

Border around mat-icon
(Solution): Forgot to import MatButtonModule .... thanks to @tight bolt

I have created a new angular application.

Commands that I have used so far.

1. ng new WeatherApp (accepted to add routing, choosed SCSS)
2. ng add @angular/material (accepted to add animation, choose deeppurple-amber as the theme)
3. Followed the steps to 'Display a component' in https://material.angular.io/guide/getting-started (working fine) ..... theme colors are also working.
4. Tried adding 'input' component https://material.angular.io/components/input/examples

but the mat-icon is has this weird boundary around it.

and when I start typing in the input box it's expands by a few pixels and pushing other components (not added here) away

I am loading the app in firefox but results are same in chrome as well.

[twin knot]

I don't see an import for the MatFormFieldModule

[noble atlas]

I have imported MatFormFieldModule but same result.

[tight bolt]

Given the screenshot, It sounds like you added a mat icon button. So you need to import MatButtonModule