How to use Google Material Design Sprite icons..?

Question

I am trying to use Google Material Icons Sprite.. the CSS they are providing is something like this

.icon {
  background-image: url(../images/sprite-alert-white.PNG);
}
.icon-ic_add_alert_white_24dp {
  background-position: -0px -0px;
  width: 32px;
  height: 32px;
}
.icon-ic_error_outline_white_24dp {
  background-position: -32px -0px;
  width: 32px;
  height: 32px;
}
.icon-ic_error_white_24dp {
  background-position: -0px -32px;
  width: 32px;
  height: 32px;
}
.icon-ic_warning_white_24dp {
  background-position: -32px -32px;
  width: 32px;
  height: 32px;
}
.icon {
  background-image: url(../images/sprite-alert-black.PNG);
}
.icon-ic_add_alert_black_24dp {
  background-position: -0px -0px;
  width: 32px;
  height: 32px;
}
.icon-ic_error_black_24dp {
  background-position: -32px -0px;
  width: 32px;
  height: 32px;
}
.icon-ic_error_outline_black_24dp {
  background-position: -0px -32px;
  width: 32px;
  height: 32px;
}
.icon-ic_warning_black_24dp {
  background-position: -32px -32px;
  width: 32px;
  height: 32px;
}
.icon {
  background-image: url(../images/sprite-toggle-white.PNG);
}
.icon-ic_check_box_outline_blank_white_24dp {
  background-position: -0px -0px;
  width: 32px;
  height: 32px;
}
.icon-ic_check_box_white_24dp {
  background-position: -32px -0px;
  width: 32px;
  height: 32px;
}
.icon-ic_indeterminate_check_box_white_24dp {
  background-position: -0px -32px;
  width: 32px;
  height: 32px;
}
.icon-ic_radio_button_checked_white_24dp {
  background-position: -32px -32px;
  width: 32px;
  height: 32px;
}
.icon-ic_radio_button_unchecked_white_24dp {
  background-position: -64px -0px;
  width: 32px;
  height: 32px;
}
.icon-ic_star_border_white_24dp {
  background-position: -64px -32px;
  width: 32px;
  height: 32px;
}
.icon-ic_star_half_white_24dp {
  background-position: -0px -64px;
  width: 32px;
  height: 32px;
}
.icon-ic_star_white_24dp {
  background-position: -32px -64px;
  width: 32px;
  height: 32px;
}
.icon {
  background-image: url(../images/sprite-toggle-black.PNG);
}

The confusion is when i am trying to use

<div class="icon icon-ic_add_alert_white_24dp"></div>

It works Awesome... but when i put this...

 <div class="icon icon-ic_add_alert_black_24dp"></div>

it doesn't work ... i think because the .icon is set multiple times and it takes either first or last value of .icon depending upon the browser..

.icon { background-image: ---------

but its Google they must have validated their CSS, Can you guide how it should work , i am new to Sprites...

REF

1) https://github.com/google/material-design-icons/tree/master/sprites

2) https://design.google.com/icons/

Please Help

the issue is very simple, google's CSS is using .icon { background-image: url (); more than two times in a single file with different URLS ...so i am not able to get all the icons . :( — N.K, Oct 05 '16 at 13:45
For questions asking "why isn't my code working" you *must* provide a complete working reproduction of the problem in your question. AKA we need at least enough of your HTML and your CSS to reproduce this problem ourselves. — TylerH, Oct 05 '16 at 13:47
`Don't forget to publish the corresponding CSS and SVG/PNG files when deploying your project.` From github ... you need just the css and img for black icons or the png and css for white icons — DaniP, Oct 05 '16 at 13:54
@DaniP I did it from Bower as suggested by Google but still its not working as its only picking up the first Image and not the second one.. — N.K, Oct 06 '16 at 03:48
@GermanoPlebani i cant use Font icons because i am developing a corporate app , and IE is not allowing fonts to be downloaded on clients machine. its their security policy .. so have to go with the PNGs — N.K, Oct 06 '16 at 03:49
@TylerH You are absolutely correct , thats what i am saying ... i just put the css reference in the HTML and this below line...
IT should work like this as per API — N.K, Oct 06 '16 at 03:50

score 1 · Accepted Answer · answered Oct 05 '16 at 13:48

1

try this

.icon {
  background-image: url(../images/sprite-alert-white.PNG);
}
.iconBlack {
  background-image: url(../images/sprite-alert-black.PNG);
}

<div class="iconBlack icon-ic_add_alert_black_24dp"></div>

answered Oct 05 '16 at 13:48

Darango

84
3

this works perfectly, but i cant change the CSS as its included in Bower Package provided by google, and there are more than 20 css files each defining atleast 10 times ".icon{ ...} " classes... – N.K Oct 06 '16 at 03:53

How to use Google Material Design Sprite icons..?

1 Answers1