How to change the size of mat-icon in Angular Material

Change the size of mat-icon in Angular Material

Angular – This article explains how to change the size of mat-icon in Angular Material using the font-size property in CSS. It suggests adding a CSS class to the mat-icon element and defining it in the component’s CSS file or global styles file. Alternatively, the font-size property can be set directly on the mat-icon element using the style attribute.

Solution: mat-form-field must contain a MatFormFieldControl error in Angular

Angular mat-form-field must contain a MatFormFieldControl

If you are using Angular material in your project and if you have any forms in the application then you must be using Angular Material Form Field Component from MatFormFieldModule And of the common error that we usually get is while working with Angular Material Form Field is: mat-form-field must contain a MatFormFieldControl.

Angular Material Button Example

Angular Material Button

Angular Material button module MatButtonModule(mat-button,mat-raised-button,mat-icon-button,mat-fab,mat-mini-fab) enhances the user experience of normal buttons tags by following Material design principles.

Angular Material List Example

Angular Material List Example

Angular Material List creates a list with list items with Material design. The basic element for Material list is mat-list and to create list item, mat-list-item is used. Angular Material provides mat-nav-list for navigation list. For selection List, we need to create list using mat-selection-list and mat-list-option. It creates the list item with a checkbox and its label.