Documentation/en/Frameworks/Angular/Material/Styling

Angular Material Styling Guide

Angular Material is a popular UI framework for building responsive and accessible web applications. This guide will help you understand how to style your Angular Material components.

Overview

Angular Material provides a wide range of theming options to customize the appearance of your application. You can modify colors, fonts, and more to match your brand or design requirements.

Theming

To start styling your Angular Material components, you need to define a theme. This can be done by creating a custom theme in your styles.css file.

/* styles.css */
@import 'ngx-bootstrap/themes/bs4_default_theme.css';

:root {
  --primary: #0275d8;
  --secondary: #6c757d;
  /* Add more custom properties here */
}

/* Include Angular Material styles */
@import 'angular-material/core/theming.css';
@import 'angular-material-examples/styles.css';

Customizing Colors

You can customize the colors of your Angular Material components by using CSS variables. Define your colors in the :root selector and use them throughout your styles.

/* styles.css */
:root {
  --primary: #0275d8;
  --primary-focus: #01579b;
  --primary-hover: #023e8a;
  --primary-disabled: #012f6f;
  /* Add more color variants here */
}

/* Example usage */
.md-button {
  background-color: var(--primary);
  color: white;
}

Fonts

To customize the fonts used in your Angular Material components, you can import a custom font file and use it in your styles.

/* styles.css */
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap');

body {
  font-family: 'Roboto', sans-serif;
}

Images

To add images to your Angular Material components, you can use the md-icon component or import images directly into your styles.

<!-- Example usage with md-icon -->
<md-icon font-set="material-icons" font-icon="home"></md-icon>

<!-- Example usage with inline image -->
<img src="path/to/image.jpg" alt="Image description">

For more information on styling Angular Material components, please refer to the official documentation.