Sencha Ext JS 7.7 is Here – Discover What’s New and Exciting – LEARN MORE

Using Material Icons with Ext JS

February 5, 2020 109 Views

Typography connotes emotion and it’s as important as the visual elements in your application. There may be times you want to enhance your app with other font libraries. Here’s a quick and simple way to add a Material Font Icon from the Google fonts library. Not only can you do that, but it’s easy to change the default font too.

Ext JS and Material icons

Adding Material Icons to the Panel

Set up Google Material Design Icons
There is more than one way to setup the icon fonts (we are using the JS html import here).
Include this single HTML line to your web page:

Select your icons
Go to Material Icons and click on an icon click the tab “Selected Icon” on the lower left to view the text:


For example, if you’ve selected the accessibility icon, you will see this:



Adding Google Fonts to Ext JS Panel

  • Navigate to google fonts and choose a font by clicking on the (+) icon.
  • The selected fonts get added to the font families and are available to view on the bottom right corner. Follow the font import instructions to embed the fonts and specify in CSS. For example importing “Monoton” font results in this:


    Add the font-family style property to your css class.

    .myPanelText {
        font-family: 'Monoton', cursive;

Combining Material Icons and Fonts

Instead of having two fonts imports, you can use one import with two font declarations in one import. Notice the pipe(|), which is used to delimit the fonts.

For example:

See it in Action

Hover over the text and the panel share icon…

Explore Ext JS Capabilities

Haven’t surveyed the full potential of Ext JS?
View Ext JS examples and explore the possibilities with our latest version Ext JS 7.1.

coming soon

Something Awesome Is