search

zavoloklom / material-design-iconic-font

Material Design Iconic Font and CSS toolkit
http://zavoloklom.github.io/material-design-iconic-font/
Creative Commons Attribution Share Alike 4.0 International
1.42k stars 197 forks source link

Issues while using it with Material AngularJS #28

Closed sasivarnan closed 9 years ago

sasivarnan commented 9 years ago

I am trying to use this material design iconic font in a project with Material Angular JS. Both Material Angular and material design iconic font elements having classes starting with "md-". But due to the way that this CSS is implemented, styles in this [class*=" md-"],[class^=md-] gets applied to Material Angular components too.

Kindly fix it to be compatible with that too.

Suggested fix: Change your existing CSS to i[class=" md-"], i[class^=md-] instead of [class=" md-"],[class^=md-], as the icons are embedded using tag.

Thanks in advance.

mjaverto commented 9 years ago

Isn't this a duplicate of https://github.com/zavoloklom/material-design-iconic-font/issues/10?

sasivarnan commented 9 years ago

Hi @mjaverto. Yup I haven't noticed that issue #10. So I made a fork of it with the solution that I have suggested. You can find that here. https://github.com/sasivarnan/material-design-iconic-font

jossef commented 9 years ago

You can customize this prefix

by using less / sass, you have the ability to change the default md prefix to anything you want

  1. Copy from the bower install location the content of .../scss/material-design-iconic-font.scss to a local project file
  2. Add after importing _variables.scss a new line that overrides $md-css-prefix

_md-icons.scss (change from md to mdi)


@import "../../lib/material-design-iconic-font/scss/variables";

$md-css-prefix: mdi;
$md-font-path: "../../lib/material-design-iconic-font/fonts";

@import "../../lib/material-design-iconic-font/scss/mixins";
@import "../../lib/material-design-iconic-font/scss/path";
@import "../../lib/material-design-iconic-font/scss/core";
@import "../../lib/material-design-iconic-font/scss/sizes";
@import "../../lib/material-design-iconic-font/scss/border";
@import "../../lib/material-design-iconic-font/scss/pulled";
@import "../../lib/material-design-iconic-font/scss/spinned";
@import "../../lib/material-design-iconic-font/scss/rotated";
@import "../../lib/material-design-iconic-font/scss/icons";

and this is the result:

image