Have you tried copying this full css? (On this link)

.epi-forms-icon{display:inline-block;vertical-align:middle}.epi-forms-icon.epi-forms-icon--small{height:16px;width:16px}.epi-forms-icon.epi-forms-icon--small.epi-forms-datetimeelementblock__icon{background:url(images/formIcons16x16.png) 0px 0px no-repeat}.epi-forms-icon.epi-forms-icon--small.epi-forms-recaptchaelementblock__icon{background:url(images/formIcons16x16.png) 0px -16px no-repeat}.epi-forms-icon.epi-forms-icon--small.epi-forms-addresseselementblock__icon{background:url(images/formIcons16x16.png) 0px -48px no-repeat}.epi-forms-icon.epi-forms-icon--small.epi-forms-datetimerangeelementblock__icon{background:url(images/formIcons16x16.png) 0px -64px no-repeat}

After applying these changes make sure that browser is refreshed properly. Because sometimes it get cached. So you can inspect into browser and see if you css file has changes that you did.

And, the hack you are talking about is the way Epi provides to override the styling of built in components.

No, that dosen't work for me. My class for recaptcha is "RecaptchElementBlock" (the same as the name of the element class) not "epi-forms-recaptchaelementblock__icon" and none of the classes are close to the classes needed to make the icon appere in "Formulärets delar" (see Image).

Ok, so all files needed to change EPi apperence need to be referenced in module.config in root or in a module.config in modules. You cant define a module.config in youre own solution-tree outside of modules?

/Jesper

Hi,

I'm looking for a solution regarding the same issue, want to be able to define my own icon.
Jesper, have you found a solution on your own?

//Carl

Sorry for the really late reply Carl,

I solved this by first adding the ContentIcon annotation to my custom ElementBlock class. EPi server will now add a class to the icon with the name set in the annotation.

I then added a CSS filepath in module.config located in the root of the application and added the CSS below. This will make EPiServer load the css to the Edit view.

ElementBlock class:

[ContentIcon("CustomElementBlock16x16")]
public class FormUsageLimiterElementBlock : InputElementBlockBase, IElementRequireClientResources

modile.config:

<?xml version="1.0" encoding="utf-8"?>
  <module>
    <clientResources>
      <add name="epi-cms.widgets.base" path="../Business/EpiFormsCustom/ClientResources/Styles.css" resourceType="Style" />
    </clientResources>
   <dojoModules>
      <add name="thunderstruck" path="Scripts" />
    </dojoModules>
</module>

CSS:

.epi-forms-icon {

  display: inline-block;
  vertical-align: middle;

}

.epi-forms-icon.epi-forms-icon--small, .dijitTreeIcon {

  height: 16px;
  width: 16px;

}

.epi-forms-icon.epi-forms-icon--small.CustomElementBlock16x16, .dijitTreeIcon.CustomElementBlock16x16 {
  background: url(CustomElementBlock16x16.png) no-repeat;
}