solution • Angular Material Design - martindubenet/wed-dev-design GitHub Wiki

There is NO official (easy) method of installing « Material Icons » as a system font on my workstation.
So far the only method I found is relying the the github project « Material Icons Cheatsheet » to allow me to use Material Icons font-face within Adobe XD, Axure RP, Sketch, Illustrator etc...

• Design
• Components
• Font icons

• « Color Tool » public webapp to test colors,
• « Material Icons Cheatsheet » a webapp to use icon as font on my OS.
• « Mat Theme Generator » private webapp to generate a custom theme.

• https://www.adobe.com/ca/products/xd/features/ui-kits.html

• https://material.io/design/material-studies/rally.html

This is a library by itself. It has it's own set of components derived from Material Design. But it does NOT include everything from the mother library.

1. mat-autocomplete is a normal text input enhanced by a panel of suggested options.
2. matBadge are small status descriptors for UI elements.
3. bottomSheet can be used to open Material Design panels to the bottom of the screen.
4. mat-button are native <button> or <a> elements enhanced with Material Design styling and ink ripples.
5. mat-button-toggle are on/off toggles with the appearance of a button. These toggles can be configured to behave as either radio-buttons or checkboxes.
6. mat-card is a content container for text, photos, and actions in the context of a single subject.
7. mat-checkbox same as native <input type="checkbox"> with enhanced UI.
8. mat-chip displays a list of values as individual, keyboard accessible, chips.
9. mat-datepicker allows users to enter a date either through text input, or by choosing a date from the calendar. It is made up of several components, directives and the date implementation module that work together.
10. matDialog can be used to open modal dialogs with Material Design styling and animations.
11. mat-divider allows for Material styling of a line separator with various orientation options.
12. mat-expansion-panel provides an expandable details-summary view.
13. mat-form-field is a component used to wrap several Angular Material components and apply common text field styles such as the underline, floating label, and hint messages.
14. mat-grid-list is a two-dimensional list view that arranges cells into grid-based layout.
15. mat-icon makes it easier to use vector-based icons in your app. This directive supports both (Google or any) icon fonts and <svg> icons, but not bitmap (pixels) based formats.
16. matInput is a directive that allows native <input> and <textarea> elements to work with <mat-form-field>.
17. mat-list is a container component that wraps and formats a series of line items. As the base list component, it provides Material Design styling, but no behavior of its own.
18. mat-menu is a floating panel containing list of options.
19. mat-paginator provides navigation for paged information, typically used with a table.
20. mat-progress-bar is a horizontal progress-bar for indicating progress and activity.
21. mat-progress-spinner and mat-spinner are a circular indicators of progress and activity.
22. mat-radio-button same as native <input type="radio"> with enhanced UI.
23. matRipple defines an area in which a ripple animation is applied based on a user event.
24. mat-select is a form control for selecting a value from a set of options, similar to the native <select> element.
25. mat-sidenav and/or mat-drawer components are designed to add side content to a fullscreen app.
26. mat-slide-toggle is an on/off control that can be toggled via clicking event.
27. mat-slider allows for the selection of a value from a range via mouse, touch, or keyboard, similar to <input type="range">.
28. snackBar, or openSnackBar(), is a service for displaying snack-bar notifications.
29. matSort and mat-sort-header are used, respectively, to add sorting state and display to <table> data-grid.
30. mat-horizontal-stepper and mat-vertical-stepper Angular Material’s stepper provides a wizard-like workflow by dividing content into logical steps.
31. mat-table provides a Material Design styled <table> data-grid that can be used to display rows of data.
32. mat-tab within mat-tab-group organize content into separate views where only one view can be visible at a time.
33. mat-toolbar is a container for headers, titles, or actions.
34. matTooltip provides a text label that is displayed when the user hovers over or longpresses an element.

• style.min.css is a compiled and minified CSS file generated from style.scss,
  • style.scss contains all the imports for the solution : @import "styles/_imports.scss"
    • styles/_imports.scsscontains:
      1. @import "fonts.googleapi.com";
      2. required ~node_modules,
      3. @import "styles/app/_*.scss";
      4. @import "styles/themes/_*.scss";
      5. @import "styles/layout/_*.scss";
      6. @import "styles/components/_*.scss";

  📁 Api/
  📁 Scripts/
  📁 Terraform/
  📂 Web ↴
    📁 node_modules/
    📂 src ↴
      📂 app ↴
        📂 features ↴
          📂 template01 ↴
            📂 pageA_example ↴
              📄 pageA.template01.html
              📄 pageA.template01.scss
              📄 pageA.template01.ts
            📂 pageB ↴
              📄 pageB.template01.html
              📄 pageB.template01.scss
              📄 pageB.template01.ts
          📂 template02/ 🗁 pageX ↴
              📄 pageX.template02.html
              📄 pageX.template02.scss
              📄 pageX.template02.ts
        📂 shared ↴
          📂 components ↴
            📂 helper ↴
              📂 ellipsis-title ↴
                📄 ellipsis-title.directive.ts
      📂 assets ↴
        📁 config/
        📁 data/
        📂 fonts ↴
          📁 FivoSans/
        📁 icons /
        📂 images ↴
          🖼 pixel.png
          📂 theme ↴
            🖼 background-texture__day.jpg
            🖼 background-texture__night.jpg
          📂 logo ↴
            🖼 app.logo.svg
            🖼 app.icon.svg
            🖼 company.logo.svg
            🖼 company.icon.svg
            🖼 microsoft.icon.svg
      📂 locale ↴
        📂 app ↴
          📄 en.json
          📄 fr.json
        📂 template_example ↴
          📄 en.json
          📄 fr.json
      📂 styles ↴
        📂 app ↴
          📄 _abstracts.scss
          📄 _colors.default.scss
          📄 _colors.brand-foo.scss
          📄 _mixins.scss
          📄 _variables.scss
        📂 components ↴
          📄 _alerts.scss
          📄 _cards.scss
          📄 _info-tooltip.scss
          📄 _modals.scss
        📂 layout ↴
          📄 _master.scss
          📄 _utils.scss
        📂 themes ↴
          📄 _default.scss
          📄 _brand-foo.scss
        📄 _imports.scss
      📂 tests/
        📂 data/ 📄 spreadsheets.ts
        📁 mocks/
      🖼 favicon.ico
      📄 index.html
      📄 main.ts
      📄 polyfills.ts
      📄 styles.scss
      📄 test.ts
    📄 .browserslistrc
    📄 .dockerignore
    📄 .editorconfig
    📄 .eslintrc.json
    📄 .gitignore
    📄 .prettierignore
    📄 .prettierrc
    📄 angular.json
    📄 chrome.json
    📄 karma.config.js
    📄 package-lock.json
    📄 package.json
    📄 README.md
    📄 tsconfig.app.json
    📄 tsconfig.json
    📄 tsconfig.spec.json

• https://material.angular.io/guide/theming

In Angular Material, a theme is created by composing multiple palettes. In particular, a theme consists of:

1. A primary palette: colors most widely used across all screens and components.
2. An accent palette: colors used for the floating action button and interactive elements.
3. A warn palette: colors used to convey error state.
4. A foreground palette: colors for text and icons.
5. A background palette: colors used for element backgrounds.

• https://fonts.google.com/icons
• https://materialdesignicons.com/
  • https://pictogrammers.github.io/@mdi/font/6.5.95/

References: https://zoaibkhan.com/blog/angular-material-dark-mode-in-3-steps/

1. Add a custom Angular-Material theme