google / google/material-design-icons

Include declarative sizing and coloring CSS in iconfont/material-icons.css

Open
#309 1 comment 2 reactions 0 assignees View on GitHub
font Material Icons
Dominant language
No language data
Stars
54k
Forks
9.7k
PR merge metrics
No merged PRs in 30d

Description

I'm involved in a project that implements very modular approach using webpack and AngularJS. I use your npm package so I can go ahead and depend on Material Design Icons like this:

``` javascript
import 'material-design-icons/iconfont/material-icons.css';
```

which is great but it does not contain declarative CSS rules that your guide suggests [here](http://google.github.io/material-design-icons/#styling-icons-in-material-design). Which means I have to use Sass to globally import it. And that means if I take my component and give it to someone else, the icons will show but all the sizing and coloring will be lost. It either goes against "component way" or I'm missing something very obvious. Feel free to educate me. Thanks in advance!

Contributor guide

Open the contributing guide

Research direction

Read the Material Design styling guide linked in the issue, then inspect iconfont/material-icons.css, the CSS entry point used by the npm import. Done means that importing this file alone provides the documented declarative sizing and coloring rules, without requiring a separate Sass import.

Written by the indexing model from the issue text.

Assessment

Tech stack
angularjs, css, javascript, webpack
Domain
frontend
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.