Switching Font Family Option for Selection Mat in Angular Material

I'm currently working on changing the font of the options inside mat-select ("In what city were you born", etc).

After some experimentation, I found that by setting ViewEncapsulation to none (allowing styles from other files to bleed in), I am able to change the font family. However, this also leads to unwanted styles bleeding in despite setting them all to ":host".

https://i.sstatic.net/JtgcR.png

One interesting observation is that when I modify the font for this class using dev tools, it successfully changes the font:

https://i.sstatic.net/sar7D.png

However, when I add the style to my CSS file and even try using ng-deep, the font still remains unchanged.

cssangularangular-materialmat-form-fieldmat-select

Answer №1

Make sure to include the following code snippet in your styles.css / styles.scss file within your Angular project:

.mat-option-text {
  font-size: 16px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The asynchronous sorting feature in Mat Table, combined with MatPaginator, is currently experiencing issues. The datasource is being assigned asynchronously in

I have been attempting to incorporate matSort functionality into an existing MatTable, however, I am facing difficulties despite following the instructions from a related thread on mat-sort not working on mat-table. It seems like my issue might be due to t ...

angularasynchronousangular-materialdatasourcemat-table

How to change the image source using jQuery when hovering over a div and set its class to active?

I am working with a div structure that looks like this: <div class="row margin-bottom-20"> <div class="col-md-3 service-box-v1" id="div1"> <div><a href="#"><img src="path" id="img1" /></a></div> ...

javascriptjqueryhtmlcss

Formatting Text in CSS and HTML

I need help aligning three images horizontally with text underneath, using CSS. Despite trying multiple methods, the images remain vertically aligned and the text does not align properly with the images. #img_cont { display: table; width: 90%; ...

htmlcss

Why is it that the z-index doesn't seem to affect the stacking order of my background image?

I am facing an issue with my Bootstrap carousel where the z-index is not working as expected. The decoration I have in the background is overlapping the text instead of appearing behind it. I want the illustration to be positioned under the text. .carou ...

htmlcssbootstrap-5

Use radio buttons to enable switching between different data options within a dropdown menu

I am working on a dropdown box that is populated dynamically using JSON data. The content in the dropdown can be categorized into 4 types, so I have included radio buttons to switch between these categories. I have created HTML code to toggle between manu ...

javascriptjqueryhtmlcss

using CSS to position elements that are generated dynamically

Hey there, I'm facing a little issue with my elements. These elements are being generated dynamically and I'd like to display them in a 4 column layout. The challenge is that they arrive separately and I can't simply wrap them in a div and u ...

css

I'm having trouble adjusting the background color in the bootstrap template

------------ I am customizing the bootstrap SB Admin template for my asp.net core Identity project. However, I am facing an issue with changing the background color of the template and the navigation menu color. Even though I can see the color changes when ...

cssasp.net-corebackground-colorasp.net-core-identity

Angular: Elf facade base class implementation for utilizing store mechanics

What is the most effective way to access the store within a facade base class, allowing for the encapsulation of commonly used methods for interacting with the store? Imagine we have a store (repository) export class SomeRepository { private readonly s ...

angulartypescript

Integrating a third-party plugin into an Angular 4 component

I am interested in integrating a 3rd party plugin into a component, such as CKEDITOR or even a jQuery plugin. While I am aware of the ng-ckeditor package, I prefer not to use it because I want the flexibility to incorporate any plugin in the future withou ...

angular

Transferring an event to a component nested two levels deep

Within my Angular 2 ngrx application, I am working with a structure that involves nested elements: parentContainer.ts @Component({ template: `<parent-component (onEvent)="onEvent($event)" ></parent-component>`, }) class ParentContaine ...

angulartypescriptngrx

How to continuously animate images in HTML using Bootstrap

I want to showcase 7-8 client images in a continuous loop using a <marquee> tag. The issue is that there is a gap between the last and first images. Here is the HTML code I have: <marquee> <ul> <li><a href="#&q ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is there a way to configure the positioning of Bootstrap carousel thumbnails to be above and beside?

My goal is to customize a bootstrap 5 thumbnails carousel by placing the thumbnails either on the top or the left side of the slides section. The default setting is at the bottom, but I need these two variations. The base model works perfectly, but I' ...

csstwitter-bootstrapcarouselbootstrap-5

Dealing with DomSanitizer problem in Angular 2

When using background-image inline for my *ngFor list items, I encountered an issue. In my Component Class, I defined a variable to store a common part of the images' URLs (e.g., ) along with unique parts of the image URLs as this.image (such as qwer ...

angulartypescriptinline-stylesangular-dom-sanitizer

Using ngClass for conditional styling in Angular 7: A step-by-step guide

Utilizing multiple classes within Angular's [ngClass] functionality is my current challenge. The goal is to make it function based on the flag condition provided by the component.ts file. ...

angularng-class

Generate Material UI sidebar components that are positioned above all other components

I am currently working on a sidebar component using the Material UI Drawer component. I am looking to add components that align side by side with the sidebar, similar to the green box shown in the image below. https://i.sstatic.net/aAtn6.png After attem ...

javascriptcssreactjsmaterial-ui

There seems to be a disconnect between the CSS and HTML files

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScript Basics</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="c ...

htmlcss

How do I use CSS to organize data by row and column within a table?

I'm looking to format the table data in a column-row layout for mobile devices. Can anyone provide an example or guidance on how to achieve this? I've browsed through some discussions but haven't found a solution that works with tables. The ...

htmlcss

Navigating the Angular Upgrade in the New Year of 2022

After browsing through https://update.angular.io/?v=12.0-13.0, I came across some instructions to update Angular in Visual Studio. npx @angular/cli@13 update @angular/core@13 @angular/cli@13 Everything seemed fine, but I became puzzled by the different ...

node.jsangularnpmangular-cli

The Art of Checkbox Design

Seeking help in replacing the default check mark on a checkbox with an image. Here is the code snippet I am currently using: <html> <head> <style> .bl { background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #175899), c ...

javascripthtmlcss

What are the disadvantages of nesting CSS Grids within each other?

I have been exploring component-driven front-end frameworks like Angular and honing my skills in CSS Grid. My query is: Is it considered a bad practice to nest CSS Grids? In my main/root component, I have utilized CSS grid to create two elements: the nav ...

htmlcssangulargridcss-grid