Questions tagged [angular-material-theming]
30 questions
1
vote
2 answers
Font Awesome Library not working with Angular Material library in Angular Project
I was trying to use font awesome css in my project but the css doesn't get applied to HTML elements.
If i remove Angular Material theme then only the Font Awesome CSS is working. But then Angular Material Components will not work!!!
@import…

Arpan Sharma
- 395
- 1
- 10
- 20
1
vote
1 answer
Angular component's style view encapsulation does not work when component scss file is imported to styles scss file
Imagine there is a SCSS mixin inside Angular component's my.component.scss file.
Now I am importing that file in Angular app's global style.scss because I would like to pass some data to that mixin.
For example:
my-component.scss.
@mixin…

kashpatel
- 696
- 1
- 6
- 18
0
votes
0 answers
Set disabled-text in Angular Material v15
I'm upgrading my Angular app to v15. Previously (in v14), to have a custom color for disabled text, I set a disabled-text property in my custom Material theme by doing this:
$my-theme: mat-light-theme($theme-primary, $theme-accent,…

ineedtoknow
- 1,283
- 5
- 28
- 46
0
votes
1 answer
Density in Angular Material Design for single buttons only
How can I apply the density for only one button?
Defining the density in the style in my less file doesn't work:
.smallDiagramButton {
@include mat.button-density(-3);
}
And using it later in the html:
0
votes
0 answers
Angular Material Theming - Treshold for black/white decision
Is there a way to set the treshold in Angular Material's theming, when white and when black text is used e.g. in buttons but also in other controls?
In my case, there is black text automatically used, where white text would be better:

Konrad
- 4,329
- 10
- 54
- 88
0
votes
1 answer
Mat palette - create on the fly
The user needs to select a 3 colours from a colour picker (primary, warn, and accent).
Then in the second system I need to set those as the Angular Material theming.
As I am fetching those colours from the database and receiving from an observable,…

RNA
- 63
- 2
- 8
0
votes
0 answers
How to convert angular pre-built theme from dark to light theme and vice versa
As you know, the angular material comes with some pre-defined themes such as:
indigo-pink.css Light
pink-bluegrey.css: Dark theme
Now, I want to convert but now sure how. Any guidance is appreciated.
indigo-pink.css Light to Dark…

AustinTX
- 1,322
- 4
- 21
- 28
0
votes
0 answers
Angular material table theming
I made a dark theme for my angular app but there is one problem. Everything changes color as expected but the material table headers color stays the same. What am I missing in the styling that it's not changing?
how can I change the color of the…

Kerk
- 283
- 1
- 4
- 24
0
votes
1 answer
CLOSED - Angular Material Typography doesn't work properly
I am trying to create my custom theme for Angular Material but when I apply the typography some elements change its own fonts but not in all the application. For example, for links doesn't works and for grid lists elements neither(I didn't notice if…

beanic
- 539
- 6
- 22
0
votes
0 answers
Is there a way to use background colors instead of primary for some components using material dark theme?
I'm using Angular Material theming for my project. I have created a custom theme, with a primary, accent and warn color. Everything is working fine, and I'm switching to material-dark-theme with a class on the root of the project.
As I am looking at…

Stephe
- 25
- 6
0
votes
1 answer
Angular material : How to use all colors of theme
I am using angular material in angular 7.
I had used angular-material in angular-1 before & it provided a way (md-colors) to user all colors.
But in for angular-material-7 i am unable to find these kind of property.
When we use color in component…

Ankur Akvaliya
- 2,989
- 4
- 28
- 53
0
votes
1 answer
angular material typography - customisation
In customizing my angular material theme's typography. I understand that one can override the default font with their own font like so:
$custom-typography: mat-typography-config(
$font-family: 'Lato, monospace'
);
Although, I noticed that the…

Joey Gough
- 2,753
- 2
- 21
- 42
0
votes
2 answers
Angular Material Theme Customization
I'm trying to modify the theme of a project that has Angular 6 and it's using Angular Material 6.3.3
Currently, I just copied the code from the Material site and followed the steps but an error is popping out when I try to run ng serve.
**ERROR** in…

Arian LC
- 23
- 5
0
votes
1 answer
How apply custom Angular Material Theme without SCSS?
I'm working in a corporate environment which is making it extremely difficult to try and get SCSS working on our build server. Is there a way to apply custom Angular Material 2 theme using custom color palettes as plain CSS instead?

adam0101
- 29,096
- 21
- 96
- 174
-1
votes
1 answer
Theming my own components by handling two themes ? Angular Material
I'm trying to theming my own components by handling two themes.
So I wrote the following code. Here is theme.scss
@import '~@angular/material/theming';
@include mat-core();
$theme-primary: mat-palette($mat-blue);
…

Shidomaru NeveRage
- 256
- 5
- 19