Open Source

React Grid Customize Icons

The Ignite UI for React IgrGrid icons can be customized to use custom icons from a different collection set using the exposed API methods:

Registering an icon caches it locally, so that it can reused between components, that reference that icon by name and collection name. Setting a reference changes which icon, from which collection, will be used when referencing that icon by name.

// Add a new 'material' icon called 'filter_list' from string
registerIconFromText("filter_list", '<svg>...</svg>', "material");

// Add a new 'material' icon called 'my-filter_list' from svg url
registerIcon("filter_list", "url" , "material")

// Sets the icon reference to the new registered icon.
setIconRef('filter_list', 'default', {
            name: 'filter_list',
            collection: 'material',
});

React Customize Icons Example

The following sample demonstrates how to switch from the original material icons to custom font awesome svg icons and back to material.

Internal Icons

The following lists all internal icons. Alias is the name of the icon by which it can be referenced. Target Icon is the internal icon name and Target Collection is the collection in which the icon is registered internally.

Alias	Target Icon	Target Collection
add	add	material
add_child	add-child	imx-icons
add_row	add-row	imx-icons
arrow_back	arrow_back	material
arrow_drop_down	arrow_drop_up	material
arrow_forward	arrow_forward	material
arrow_next	chevron_right	material
arrow_prev	chevron_left	material
case_sensitive	case-sensitive	imx-icons
carousel_next	arrow_forward	material
carousel_prev	arrow_back	material
chevron_left	chevron_left	material
chevron_right	chevron_right	material
clock	access_time	material
close	close	material
collapse	expand_less	material
confirm	check	material
date_range	date_range	material
delete	delete	material
drag_indicator	drag_indicator	material
edit	edit	material
error	error	material
expand	expand_more	material
expand_more	expand_more	material
file_download	file_download	material
filter_all	select-all	imx-icons
filter_before	is-before	imx-icons
filter_contains	contains	imx-icons
filter_does_not_contain	does-not-contain	imx-icons
filter_empty	is-empty	imx-icons
filter_equal	equals	imx-icons
filter_false	is-false	imx-icons
filter_greater_than	greater-than	imx-icons
filter_greater_than_or_equal	greater-than-or-equal	imx-icons
filter_in	is-in	imx-icons
filter_last_month	last-month	imx-icons
filter_last_year	last-year	imx-icons
filter_less_than	less-than	imx-icons
filter_less_than_or_equal	less-than-or-equal	imx-icons
filter_next_month	next-month	imx-icons
filter_next_year	next-year	imx-icons
filter_not_empty	not-empty	imx-icons
filter_not_equal	not-equal	imx-icons
filter_not_null	is-not-null	imx-icons
filter_null	is-null	imx-icons
filter_starts_with	starts-with	imx-icons
filter_this_month	this-month	imx-icons
filter_this_year	this-year	imx-icons
filter_today	today	imx-icons
filter_true	is-true	imx-icons
filter_yesterday	yesterday	imx-icons
first_page	first_page	material
group_work	group_work	material
hide	visibility_off	material
import_export	import_export	material
input_collapse	arrow_drop_up	material
input_clear	clear	material
input_expand	arrow_drop_down	material
jump_down	jump-down	imx-icons
jump_up	jump-up	imx-icons
last_page	last_page	material
more_vert	more_vert	material
next	navigate_next	material
pin	pin-left	imx-icons
prev	navigate_before	material
refresh	refresh	material
remove	cancel	material
search	search	material
selected	done	material
show	visibility	material
sort_asc	arrow_upward	material
sort_desc	arrow_downward	material
functions	functions	material
table_rows	table_rows	material
today	calendar_today	material
tree_collapse	expand_more	material
tree_expand	chevron_right	material
unfold_less	unfold_less	material
unfold_more	unfold_more	material
unpin	unpin-left	imx-icons
view_column	view_column	material

Here’s a breakdown of all icons as used by component:

Grid

Icon	Description
add	Used in excel-filter menu to add filter entry.
arrow_back	Used in various UI elements for moving a column backwards.
arrow_drop_down	Used in various buttons to indicate togglable menus.
arrow_forward	Used in various UI elements for moving a column forwards.
cancel	Used in various UI elements for canceling operations.
chevron_right	Used to indicate expandable menus, like in the excel style filtering.
close	Used to close an expanded menu.
confirm	Used to confirm an operation.
drag_indicator	Used to show a handle to indicate an item can be dragged.
error	Used in editable cells to indicate erroneous data input.
expand_more	Used by the excel filtering menu to indicate the addition of more filters.
file_download	Used by the excel filter exporter.
filter_	Used for various filtering operands.
group_work	Used by the group-by drop area.
hide	Used by various UI elements for hiding columns.
import_export	Used by the pivot data selector for moving.
input_clear	Used by input fields for clearing input data.
next	Used by the filtering row menu to navigate between chips.
pin	Used by various UI elements for column pinning.
prev	Used by the filtering row menu to navigate between chips.
remove	Used by various UI elements as a removal indicator.
refresh	Used by the filtering row menu to reload the filters.
selected	Used by various UI elements to indicated active selection.
show	Used by various UI elements for showing columns.
sort_asc	Used by various UI elements to indicate sorting direction.
sort_desc	Used by various UI elements to indicate sorting direction.
functions	Used by the pivot grid and data selectors.
table_rows	Used by the pivot grid data selector.
tree_collapse	Used by tree-like structure to show less details.
tree_expand	Used by tree-like structure to show more details.
unpin	Used by various UI elements for column pinning.
unfold_less	Used by the hierarchical grid to collapse all rows.
unfold_more	Used by the hierarchical grid to expand all rows.
view_column	Used by the pivot data selector.

Paginator

Icon	Description
first_page	Used by the button used for navigating to the first page.
last_page	Used by the button used for navigating to the last page.
prev	Used by the button used for navigating to the previous page.
next	Used by the button used for navigating to the next page.

Action Strip

Icon	Description
add_child	Used by the popup menu.
add_row	Used by the popup menu.
more_vert	Used by the popup menu.

API References

Additional Resources

Our community is active and always welcoming to new ideas.