Using Custom Icons in Your Ext JS Apps

Posted on in CSS Ext JS Sass Sencha

Do you like the glyph attribute in Ext JS 4.2 as much as I do? With glyphs, you can implement an icon that is created from a font. There are advantages to using icon fonts — they are vectors and therefore never lose quality; it’s easy to style icons without the use of Photoshop; and you make one page request to download all of the icons.

The glyph attribute is available on Ext JS buttons and panels. You can download a custom icon font from a site like: IcoMoon and implement the font in your style sheet. The value of the glyph attribute is the decimal code that maps to the unicode character which represents your icon. You add this attribute to the name of your custom font, and you’re good to go:

glyph: '115@MyIconFont',

A lot of Ext JS components extend from panel, but what if you want to implement icon fonts in other components that do not extend from

To answer this question, we can use the concepts that are actually happening under the hood:

A character is inserted before (or after) a certain DOM element. You can see an icon because this character is styled with a custom font (@font-face technique) that contains all of the icons.

Let’s try this ourselves:

  1. With your browser’s dev tools, select the DOM element in which you want to implement an icon. Ideally put a CSS class on top of it (for example: .arrow), so you can easily refer to it from your Sass.
  2. Download an icon font and map it to some character. (Let's use the following character: >)
  3. Implement the icon font in your Sass:
    @font-face { font-family: 'MyIconFont'; src: url('../resources/fonts/Nouveau.eot'); src: url('../resources/fonts/Nouveau.eot?#iefix') format('embedded-opentype'), url('../resources/fonts/Nouveau.woff') format('woff'), url('../resources/fonts/Nouveau.ttf') format('truetype'), url('../resources/fonts/Nouveau.svg#Nouveau') format('svg'); font-weight: normal; font-style: normal; }
  4. Alright, now comes the magic. In your Sass style sheet, write the following CSS rules:
    .arrow:before { content: ">"; //the character mapped to an icon font-family: 'MyIconFont'; //the name of the icon font color: red; //set additional colors or dimensions... margin-right: 10px; }

The pseudo CSS selector
:beforewill create the icon on the left side of the DOM element. The pseudo CSS selector
:afterwill create the icon on the right side of the DOM element.

Now that you know how to use this technique, you can try it in any components, such as templates, dataviews, form fields, etc.


  1. http:// says on
    August 26, 2014 at 3:29 am

    Hello, I desire to subscribe for this website to obtain most up-to-date updates, so where can i do it please help.

  2. Rob says on
    September 15, 2014 at 8:11 pm

    I’m using IcoMoon to create a a font for a Sencha Touch app. It works fine in a browser (Chrome), but when I create a native app with Cordova and deploy it to an Android device, the icons don’t show. (The original Pictos icons show, but not the IcoMoon icons.) I’ve followed a number of tutorials with no success. Any ideas?

Post a Comment

Your email is never published nor shared.
Required fields are marked *