{"result":{"depiction_url":null,"edges":{"hasreference":{"objects":[{"created":"2026-10-07T11:13:44Z","object_id":{"id":2947,"is_a":["text","documentation","developerguide"],"name":"developer_asset_build","title":{"_type":"trans","tr":{"en":"Build and serve frontend assets"}},"uri":"https:\/\/zotonic.com\/id\/2947"},"seq":1}],"predicate":{"id":2774,"is_a":["meta","predicate"],"name":"hasreference","title":{"_type":"trans","tr":{"en":"Documentation reference"}},"uri":"https:\/\/zotonic.com\/id\/hasreference"}},"references":{"objects":[{"created":"2020-05-30T05:48:15Z","object_id":{"id":2113,"is_a":["text","documentation","reference","module"],"name":"doc_module_mod_artwork","title":"mod_artwork","uri":"https:\/\/zotonic.com\/id\/2113"},"seq":1000000}],"predicate":{"id":332,"is_a":["meta","predicate"],"name":"references","title":{"_type":"trans","tr":{"en":"References"}},"uri":"https:\/\/zotonic.com\/id\/references"}},"refers":{"objects":[{"created":"2026-10-07T11:13:02Z","object_id":{"id":1372,"is_a":["text","documentation","reference","template_tag"],"name":"doc_template_tag_tag_lib","title":"lib","uri":"https:\/\/zotonic.com\/id\/1372"},"seq":1000000}],"predicate":{"id":2409,"is_a":["meta","predicate"],"name":"refers","title":{"_type":"trans","tr":{"en":"Refers"}},"uri":"https:\/\/zotonic.com\/id\/refers"}},"relation":{"objects":[{"created":"2020-05-30T05:48:15Z","object_id":{"id":1637,"is_a":["text","documentation","developerguide"],"name":"doc_developerguide_icons","title":{"_type":"trans","tr":{"en":"Build and serve frontend assets"}},"uri":"https:\/\/zotonic.com\/id\/1637"},"seq":1000000}],"predicate":{"id":303,"is_a":["meta","predicate"],"name":"relation","title":{"_type":"trans","tr":{"nl":"Relatie","en":"Relation"}},"uri":"http:\/\/purl.org\/dc\/terms\/relation"}},"subject":{"objects":[{"created":"2026-10-07T11:13:44Z","object_id":{"id":2557,"is_a":["categorization","keyword","keyword_information_type"],"name":"zotonic_topic_cookbook_recipe","title":"Cookbook recipe","uri":"https:\/\/zotonic.com\/id\/2557"},"seq":1},{"created":"2026-10-07T11:13:44Z","object_id":{"id":2563,"is_a":["categorization","keyword","keyword_audience"],"name":"zotonic_topic_frontend_developer","title":"Frontend developer","uri":"https:\/\/zotonic.com\/id\/2563"},"seq":2},{"created":"2026-10-07T11:13:44Z","object_id":{"id":2620,"is_a":["categorization","keyword","keyword_architecture"],"name":"zotonic_topic_template","title":"Template","uri":"https:\/\/zotonic.com\/id\/2620"},"seq":3},{"created":"2026-10-07T11:13:44Z","object_id":{"id":2583,"is_a":["categorization","keyword","keyword_domain"],"name":"zotonic_topic_user_interface_and_interaction","title":"User interface and interaction","uri":"https:\/\/zotonic.com\/id\/2583"},"seq":4}],"predicate":{"id":308,"is_a":["meta","predicate"],"name":"subject","title":{"_type":"trans","tr":{"en":"Keyword"}},"uri":"http:\/\/purl.org\/dc\/elements\/1.1\/subject"}}},"id":1579,"is_a":["text","documentation","cookbook"],"links":[{"rel":"self","target":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1579"},{"rel":"hub","target":"https:\/\/zotonic.com\/.zotonic\/websub"}],"medium":null,"medium_url":null,"name":"doc_cookbook_template_icons","page_url":{"en":"https:\/\/zotonic.com\/cookbook\/1579\/add-an-icon-to-a-control","x-default":"https:\/\/zotonic.com\/cookbook\/1579\/add-an-icon-to-a-control"},"preview_url":null,"resource":{"body":{"_type":"trans","tr":{"en":"

An icon class works only when its font or stylesheet is loaded. The standard admin uses Bootstrap-era icon classes; a custom frontend may use a different set. Inspect the active theme rather than assuming every site loads the same icon library.<\/p>\n

For a button in admin:<\/p>\n

<button type="button" class="btn btn-default">\n    <span class="glyphicon glyphicon-search" aria-hidden="true"><\/span>\n    {_ Search _}\n<\/button>\n<\/code><\/pre>\n
Keep visible text where possible. An icon-only control needs an accessible name such as aria-label<\/code>, and decorative icons should be hidden from assistive technology. Use tag#lib<\/code><\/a> to include any additional icon assets through the site's normal asset pipeline.<\/p>\n
Test the control with the font loaded, with keyboard navigation and at increased zoom. Do not add an old LESS build chain just to copy an icon example.<\/p>"}},"category_id":{"id":318,"is_a":["meta","category"],"name":"cookbook","title":{"_type":"trans","tr":{"en":"Cookbook"}},"uri":"https:\/\/test.zotonic.com\/id\/318"},"content_group_id":{"id":339,"is_a":["meta","content_group"],"name":"default_content_group","title":{"_type":"trans","tr":{"en":"Default Content Group"}},"uri":"https:\/\/zotonic.com\/id\/default_content_group"},"created":"2020-05-30T05:47:26Z","creator_id":{"id":336,"is_a":["person","robot"],"name":"gitbot","title":"Git","uri":"https:\/\/zotonic.com\/id\/336"},"doc_editorial_bundle":true,"doc_editorial_edges":{"hasreference":[2947],"subject":[2557,2563,2583,2620]},"github_url":"https:\/\/github.com\/zotonic\/zotonic\/tree\/master\/doc\/cookbook\/template-icons.rst","is_authoritative":true,"is_dependent":false,"is_featured":false,"is_protected":false,"is_published":true,"is_unfindable":false,"language":["en"],"modified":"2026-10-07T11:13:55Z","modifier_id":{"id":1,"is_a":["person"],"name":"administrator","title":"Site Administrator","uri":"https:\/\/zotonic.com\/id\/1"},"name":"doc_cookbook_template_icons","pivot_geocode":null,"pivot_location_lat":null,"pivot_location_lng":null,"privacy":0,"publication_end":"9999-06-01T00:00:00Z","publication_start":"2022-02-15T10:01:37Z","slug":"add-an-icon-to-a-control","summary":{"_type":"trans","tr":{"en":"Use icons from the loaded theme and keep the control accessible."}},"title":{"_type":"trans","tr":{"en":"Add an icon to a control"}},"title_slug":{"_type":"trans","tr":{"en":"add-an-icon-to-a-control"}},"tz":"UTC","uri":null,"version":32,"visible_for":0},"uri":"https:\/\/zotonic.com\/id\/1579","uri_template":"https:\/\/zotonic.com\/id\/:id","websub":{"hub":"https:\/\/zotonic.com\/.zotonic\/websub","topic":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1579"}},"status":"ok"}