How to override Angular material styles with global styles.css while avoiding !important?

Question

In my angular 7 application, I am using material design. In my global styles.css file, I have some styling for material components, namely for mat icons. However, my settings are overridden by material's own style.

Using !important obviously works, but I think there is a more natural way, I just can't figure it out. In chrome dev tools, my CSS class selector simply appears below that of material design selector, and I think this means that it was simply applied sooner, and thus material style takes precedence, since they are both class selectors and should have the same priority (that is my understanding, anyway).

Relevant entry from styles.css:

.icon {
  display: inline-block;
  height: 30px;
  width: 30px;
  margin: 0 auto;
  text-align: center;
  vertical-align: middle;
}

How it appears in chrome dev tools:

.mat-icon {
    background-repeat: no-repeat;
    display: inline-block;
    fill: currentColor;
    height: 24px;
    width: 24px;
}

.icon {
    height: 30px;
    width: 30px;
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
}

Width and height are simply crossed out in my .icon style.

How can I make my style sheet be prioritized? Can I somehow specify the order in which stylesheets load, or explicitly tell angular that I want my styles take over material styles?

EDIT: added HTML where mat icons are:

<mat-toolbar color="primary">
  <div fxFlex fxLayout>
    <mat-toolbar-row fxFlex fxLayout fxLayoutGap="20px" class="navigation-items icon-group">
      <span>
        <a routerLink="/">
          <mat-icon class="icon">home</mat-icon>
          <span class="label">Home</span>
        </a>
      </span>
      <span>
        <a routerLink="/product">
          <mat-icon class="icon">bubble_chart</mat-icon>
          <span class="label">Product</span>
        </a>
      </span>
      <span>
        <a routerLink>
          <mat-icon class="icon">widgets</mat-icon>
          <span class="label">Expedition</span>
        </a>
      </span>
      <span class="spacer"></span>
      <span>
        <a routerLink (click)="logout()">
          <mat-icon class="icon">input</mat-icon>
          <span class="label">LogOut</span>
        </a>
      </span>
    </mat-toolbar-row>
  </div>
</mat-toolbar>

RadekF · Accepted Answer · 2019-03-28 21:10:40Z

1

It is a specificity problem. You can modify the mat-icon class directly, use id which has higher specificity or use combined selector like

.icon-group > .icon

answered Mar 28, 2019 at 21:10

RadekF

4965 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jozef Morvay Over a year ago

By modifying mat-icon class directly you mean simply changing my .icon class to .mat-icon to add my desired properties? That did not work, I tried. Also, I updated the question with the HTML sample, as I have no idea how using child selector could help me. Where do I put the icon-group class?

RadekF Over a year ago

In your case you should be able to do it with either a > .icon or a > mat-icon

Jozef Morvay Over a year ago

That did the trick. So combined selectors are more specific that just regular class selectors? I read some stuff on this topic, but this rule was not mentioned anywhere. Thanks.

Collectives™ on Stack Overflow

How to override Angular material styles with global styles.css while avoiding !important?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related