Как использовать значки Google Design Design Sprite ...?

Question

Я пытаюсь использовать Google Материальные иконки Sprite .. СМЧ они обеспечивают что-то вроде этого

.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); 
} 

Путаница , когда я пытаюсь использовать

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

Он работает Высокий ... но когда я кладу это ...

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

не приста к ... я думаю, потому что .Icon установлено несколько раз, и это занимает первое или последнее значение .Icon в зависимости от браузера ..

.Icon {фоновое изображение: ---- -----

но Google они должны быть проверены их CSS, вы можете направлять, как он должен работать, я новичок в спрайтов ...

REF

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

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

Пожалуйста, помогите

Answer 1

попробовать это

.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>