Material Design Icons无法应用外部CSS自定义类的原因

Hey there! Great question—you absolutely can customize Material Design Icons using an external CSS file, so let's break down why your styles aren't taking effect when moving them from inline <style> to global.css.

Common Reasons & Fixes #

1. Your Selector Isn't Specific Enough

Material Design Icons' default CSS uses fairly specific selectors (like .material-icons) to set core styles (font family, size, etc.). If your external CSS uses a less specific selector, even if it loads after the icon CSS, it might get overridden.

For example:

• If your icon is <i class="material-icons my-icon">favorite</i>
• And your global.css has:

  .my-icon {
    color: red;
  }
  

This might not work if the default .material-icons selector has conflicting styles (like color) that have the same specificity. Instead, boost your selector's specificity:

/* More specific selector to override default styles */
.material-icons.my-icon {
  color: #ff4081;
  font-size: 32px;
}

You can also use parent elements to add specificity, like .header .material-icons if the icon is inside a header container.

2. Your External CSS Isn't Loading Correctly

Double-check that your global.css is actually being loaded after the Material Icons CSS. In your HTML, the order should be:

<!-- First: Material Icons CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Then: Your external CSS -->
<link rel="stylesheet" href="global.css">

Also, verify the path to global.css is correct—if it's in a subfolder like css/global.css, make sure the href reflects that. Use your browser's DevTools (F12) → Network tab to check if global.css loads with a 200 status (not 404).

3. Browser Cache Is Serving Old CSS

Browsers often cache CSS files to speed up loading. If you updated global.css but don't see changes, force a hard refresh:

• Windows/Linux: Ctrl + Shift + R
• Mac: Cmd + Shift + R
  You can also add a version parameter to the CSS link to bypass cache temporarily:

<link rel="stylesheet" href="global.css?v=1">

4. You're Targeting the Wrong Element/Selector

Make sure your CSS selector matches exactly what's in your HTML. For example:

• If your icon uses <span class="material-icons">...</span> instead of <i>, don't write CSS for i.material-icons.
• If you misspelled the class name (e.g., my-icn instead of my-icon), the styles won't apply. Use DevTools → Elements tab to inspect the icon and confirm its classes.

Quick Example of Working External CSS #

/* global.css */
/* Change icon color */
.material-icons.accent-color {
  color: #2196f3;
}

/* Increase icon size */
.material-icons.large-icon {
  font-size: 48px;
}

/* Add hover effect */
.material-icons.hoverable:hover {
  cursor: pointer;
  opacity: 0.7;
}

Then use it in HTML:

<i class="material-icons accent-color large-icon hoverable">star</i>

Final Notes #

Material Design Icons are just font-based icons, so any CSS that works on text elements (color, font-size, opacity, etc.) will work on them—you just need to make sure your styles have enough specificity to override the default icon CSS, and that your external file loads correctly.

内容的提问来源于stack exchange，提问作者suchislife801