jsf - Overriding the Primefaces error message icon -

i have requirement have display error icon when there validation error. using icononly attribute of primefaces message component same. trying override icon using below css:

      .ui-message-error-icon-new {       background: url(../img/icon-error.png) no-repeat !important;  width: 23px;   height: 32px;  margin-top: 6px;  float: right;  cursor: pointer;       } 

the image getting displayed unable rid of primefaces error message border. please find below screenshot:

any appreciated.

if want change red square color/hide can use this:

.ui-message-error {     border:none;      background: none; }