gem-graph/gem-graph-client
gem-graph
/
gem-graph-client
3
0
Fork 0
Code Issues 14 Pull Requests Projects Releases Activity
gem-graph-client/docs/GTK-docs/gnome-dev-documentation/developer.gnome.org/documentation/tutorials/themed-icons.html

485 lines
42 KiB
HTML
Raw Normal View History

docs/*: integrate doxygen, create a documentation zone, adds notes We wanted to have an automated documentation for our project. We choose doxygen since this is a well-established project, with common standards. To generate the documentation, simply type `make docs` and open `docs/html/index.html`. The documentation zone actually contains: - archives: several files from past of the projects, historical purpose - GTK-docs: ressources on GTK internals and API - rtfm: first draft of a user manual - showcase: some pictures of the UI example, that were communicated on the Gem-graph discussion room (XMPP) - html: doxygen-generated docs
2024-10-28 13:57:44 +01:00
<!doctype html>
<html class="no-js">
<head><meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="color-scheme" content="light dark"><meta name="generator" content="Docutils 0.17.1: http://docutils.sourceforge.net/" />
<link rel="index" title="Index" href="../genindex.html" /><link rel="search" title="Search" href="../search.html" /><link rel="next" title="Dealing With Deprecations" href="deprecations.html" /><link rel="prev" title="Using Notifications" href="notifications.html" />
<meta name="generator" content="sphinx-4.3.0, furo 2022.06.21"/>
<title>Themed Icons - GNOME Developer Documentation</title>
<link rel="stylesheet" type="text/css" href="../_static/pygments.css" />
<link rel="stylesheet" type="text/css" href="../_static/styles/furo.css?digest=40978830699223671f4072448e654b5958f38b89" />
<link rel="stylesheet" type="text/css" href="../_static/tabs.css" />
<link rel="stylesheet" type="text/css" href="../_static/styles/furo-extensions.css?digest=30d1aed668e5c3a91c3e3bf6a60b675221979f0e" />
<link rel="stylesheet" type="text/css" href="../_static/gnome.css" />
<style>
body {
--color-code-background: #f8f8f8;
--color-code-foreground: black;
--color-brand-primary: #4a86cf;
--color-brand-content: #4a86cf;
}
@media not print {
body[data-theme="dark"] {
--color-code-background: #202020;
--color-code-foreground: #d0d0d0;
}
@media (prefers-color-scheme: dark) {
body:not([data-theme="light"]) {
--color-code-background: #202020;
--color-code-foreground: #d0d0d0;
}
}
}
</style></head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="svg-toc" viewBox="0 0 24 24">
<title>Contents</title>
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024">
<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 0 0 0 13.8z"/>
</svg>
</symbol>
<symbol id="svg-menu" viewBox="0 0 24 24">
<title>Menu</title>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather-menu">
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="3" y1="6" x2="21" y2="6"></line>
<line x1="3" y1="18" x2="21" y2="18"></line>
</svg>
</symbol>
<symbol id="svg-arrow-right" viewBox="0 0 24 24">
<title>Expand</title>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather-chevron-right">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</symbol>
<symbol id="svg-sun" viewBox="0 0 24 24">
<title>Light mode</title>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather-sun">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
</symbol>
<symbol id="svg-moon" viewBox="0 0 24 24">
<title>Dark mode</title>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="icon-tabler-moon">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" />
</svg>
</symbol>
<symbol id="svg-sun-half" viewBox="0 0 24 24">
<title>Auto light/dark mode</title>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="icon-tabler-shadow">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<circle cx="12" cy="12" r="9" />
<path d="M13 12h5" />
<path d="M13 15h4" />
<path d="M13 18h1" />
<path d="M13 9h4" />
<path d="M13 6h1" />
</svg>
</symbol>
</svg>
<input type="checkbox" class="sidebar-toggle" name="__navigation" id="__navigation">
<input type="checkbox" class="sidebar-toggle" name="__toc" id="__toc">
<label class="overlay sidebar-overlay" for="__navigation"></label>
<label class="overlay toc-overlay" for="__toc"></label>
<div class="page">
<header class="mobile-header">
<div class="header-left">
<label class="nav-overlay-icon" for="__navigation">
<i class="icon"><svg><use href="#svg-menu"></use></svg></i>
</label>
</div>
<div class="header-center">
<a href="../index.html"><div class="brand">GNOME Developer Documentation</div></a>
</div>
<div class="header-right">
<label class="toc-overlay-icon toc-header-icon" for="__toc">
<i class="icon"><svg><use href="#svg-toc"></use></svg></i>
</label>
</div>
</header>
<aside class="sidebar-drawer">
<div class="sidebar-container">
<div class="sidebar-sticky"><a class="sidebar-brand" href="../index.html">
<span class="sidebar-brand-text">GNOME Developer Documentation</span>
</a><form class="sidebar-search-container" method="get" action="../search.html" role="search">
<input class="sidebar-search" placeholder=Search name="q" aria-label="Search">
<input type="hidden" name="check_keywords" value="yes">
<input type="hidden" name="area" value="default">
</form>
<div id="searchbox"></div><div class="sidebar-scroll"><div class="sidebar-tree">
<p class="caption" role="heading"><span class="caption-text">Contents</span></p>
<ul class="current">
<li class="toctree-l1 has-children"><a class="reference internal" href="../introduction.html">Platform Introduction</a><input class="toctree-checkbox" id="toctree-checkbox-1" name="toctree-checkbox-1" role="switch" type="checkbox"/><label for="toctree-checkbox-1"><div class="visually-hidden">Toggle child pages in navigation</div><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
<li class="toctree-l2 has-children"><a class="reference internal" href="../introduction/components.html">Platform Components</a><input class="toctree-checkbox" id="toctree-checkbox-2" name="toctree-checkbox-2" role="switch" type="checkbox"/><label for="toctree-checkbox-2"><div class="visually-hidden">Toggle child pages in navigation</div><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
<li class="toctree-l3"><a class="reference internal" href="../introduction/overview/libraries.html">Libraries</a></li>
<li class="toctree-l3"><a class="reference internal" href="../introduction/overview/services.html">Services</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../introduction/languages.html">Programming Languages</a></li>
<li class="toctree-l2"><a class="reference internal" href="../introduction/builder.html">GNOME Builder</a></li>
<li class="toctree-l2"><a class="reference internal" href="../introduction/flatpak.html">Flatpak</a></li>
</ul>
</li>
<li class="toctree-l1 has-children"><a class="reference internal" href="../guidelines.html">Guidelines</a><input class="toctree-checkbox" id="toctree-checkbox-3" name="toctree-checkbox-3" role="switch" type="checkbox"/><label for="toctree-checkbox-3"><div class="visually-hidden">Toggle child pages in navigation</div><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
<li class="toctree-l2 has-children"><a class="reference internal" href="../guidelines/programming.html">Programming Guidelines</a><input class="toctree-checkbox" id="toctree-checkbox-4" name="toctree-checkbox-4" role="switch" type="checkbox"/><label for="toctree-checkbox-4"><div class="visually-hidden">Toggle child pages in navigation</div><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
<li class="toctree-l3"><a class="reference internal" href="../guidelines/programming/coding-style.html">C Coding Style</a></li>
<li class="toctree-l3"><a class="reference internal" href="../guidelines/programming/memory-management.html">Managing Memory</a></li>
<li class="toctree-l3"><a class="reference internal" href="../guidelines/programming/writing-good-code.html">The Importance of Writing Good Code</a></li>
<li class="toctree-l3"><a class="reference internal" href="../guidelines/programming/optimizing.html">Optimizing GNOME Applications</a></li>
<li class="toctree-l3"><a class="reference internal" href="../guidelines/programming/namespacing.html">Namespacing</a></li>
<li class="toctree-l3"><a class="reference internal" href="../guidelines/programming/introspection.html">Introspection</a></li>
</ul>
</li>
<li class="toctree-l2 has-children"><a class="reference internal" href="../guidelines/accessibility.html">Accessibility</a><input class="toctree-checkbox" id="toctree-checkbox-5" name="toctree-checkbox-5" role="switch" type="checkbox"/><label for="toctree-checkbox-5"><div class="visually-hidden">Toggle child pages in navigation</div><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
<li class="toctree-l3"><a class="reference internal" href="../guidelines/accessibility/coding-guidelines.html">Coding Guidelines for Supporting Accessibility</a></li>
<li class="toctree-l3"><a class="reference internal" href="../guidelines/accessibility/custom-widgets.html">Making Custom Components Accessible</a></li>
</ul>
</li>
<li class="toctree-l2 has-children"><a class="reference internal" href="../guidelines/localization.html">Localization</a><input class="toctree-checkbox" id="toctree-checkbox-6" name="toctree-checkbox-6" role="switch" type="checkbox"/><label for="toctree-checkbox-6"><div class="visually-hidden">Toggle child pages in navigation</div><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
<li class="toctree-l3"><a class="reference internal" href="../guidelines/localization/practices.html">Best Practices for Localization</a></li>
</ul>
</li>
<li class="toctree-l2 has-children"><a class="reference internal" href="../guidelines/maintainer.html">Maintainer Guidelines</a><input class="toctree-checkbox" id="toctree-checkbox-7" name="toctree-checkbox-7" role="switch" type="checkbox"/><label for="toctree-checkbox-7"><div class="visually-hidden">Toggle child pages in navigation</div><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
<li class="toctree-l3"><a class="reference internal" href="../guidelines/maintainer/api-stability.html">API Stability</a></li>
<li class="toctree-l3"><a class="reference internal" href="../guidelines/maintainer/parallel-installability.html">Parallel Installability</a></li>
<li class="toctree-l3"><a class="reference internal" href="../guidelines/maintainer/integrating.html">Integrating with GNOME</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../guidelines/devel-docs.html">Developer Documentation Style Guidelines</a></li>
</ul>
</li>
<li class="toctree-l1 current has-children"><a class="reference internal" href="../tutorials.html">Tutorials</a><input checked="" class="toctree-checkbox" id="toctree-checkbox-8" name="toctree-checkbox-8" role="switch" type="checkbox"/><label for="toctree-checkbox-8"><div class="visually-hidden">Toggle child pages in navigation</div><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul class="current">
<li class="toctree-l2 has-children"><a class="reference internal" href="beginners.html">Beginners Tutorials</a><input class="toctree-checkbox" id="toctree-checkbox-9" name="toctree-checkbox-9" role="switch" type="checkbox"/><label for="toctree-checkbox-9"><div class="visually-hidden">Toggle child pages in navigation</div><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
<li class="toctree-l3 has-children"><a class="reference internal" href="beginners/getting_started.html">Getting Started</a><input class="toctree-checkbox" id="toctree-checkbox-10" name="toctree-checkbox-10" role="switch" type="checkbox"/><label for="toctree-checkbox-10"><div class="visually-hidden">Toggle child pages in navigation</div><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
<li class="toctree-l4"><a class="reference internal" href="beginners/getting_started/content_view.html">Adding A Content View</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/getting_started/opening_files.html">Loading Content From A File</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/getting_started/cursor_position.html">Showing The Cursor Position</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/getting_started/saving_files.html">Saving The Content To A File</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/getting_started/saving_state.html">Saving The Application State</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/getting_started/adding_toasts.html">Notifying The User With Toasts</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/getting_started/dark_mode.html">Forcing The Dark Color Scheme</a></li>
</ul>
</li>
<li class="toctree-l3 has-children"><a class="reference internal" href="beginners/components.html">UI components</a><input class="toctree-checkbox" id="toctree-checkbox-11" name="toctree-checkbox-11" role="switch" type="checkbox"/><label for="toctree-checkbox-11"><div class="visually-hidden">Toggle child pages in navigation</div><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/window.html">Windows</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/image.html">Images</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/label.html">Labels</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/button.html">Buttons</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/box.html">Boxes</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/stack.html">Stacks</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/leaflet.html">Leaflets</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/toggle.html">Toggles</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/check_box.html">Check Boxes</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/radio_button.html">Radio Buttons</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/spin_button.html">Spin Buttons</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/link_button.html">Link Buttons</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/switch.html">Switches</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/menu_button.html">Menu Buttons</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/entry.html">Entries</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/password_entry.html">Password Entries</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/message_dialog.html">Messages</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/file_dialog.html">File Dialogs</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/spinner.html">Spinners</a></li>
<li class="toctree-l4"><a class="reference internal" href="beginners/components/level_bar.html">Level Bars</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="application-id.html">Application ID</a></li>
<li class="toctree-l2"><a class="reference internal" href="application.html">Using GtkApplication</a></li>
<li class="toctree-l2"><a class="reference internal" href="save-state.html">Saving and Loading Window State</a></li>
<li class="toctree-l2"><a class="reference internal" href="notifications.html">Using Notifications</a></li>
<li class="toctree-l2 current current-page"><a class="current reference internal" href="#">Themed Icons</a></li>
<li class="toctree-l2"><a class="reference internal" href="deprecations.html">Dealing With Deprecations</a></li>
<li class="toctree-l2"><a class="reference internal" href="actions.html">Actions</a></li>
<li class="toctree-l2"><a class="reference internal" href="menus.html">Menus</a></li>
<li class="toctree-l2"><a class="reference internal" href="search-provider.html">Writing a Search Provider</a></li>
<li class="toctree-l2"><a class="reference internal" href="pre-and-post-conditions.html">Pre- and Post-Conditions</a></li>
<li class="toctree-l2"><a class="reference internal" href="main-contexts.html">Main Contexts</a></li>
<li class="toctree-l2"><a class="reference internal" href="lists.html">Using GLib Lists</a></li>
<li class="toctree-l2"><a class="reference internal" href="threading.html">Threading</a></li>
<li class="toctree-l2"><a class="reference internal" href="asynchronous-programming.html">Asynchronous Programming</a></li>
<li class="toctree-l2"><a class="reference internal" href="drag-and-drop.html">Drag and Drop</a></li>
<li class="toctree-l2"><a class="reference internal" href="widget-templates.html">Widget Templates</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</aside>
<main class="main">
<div class="content">
<article role="main">
<label class="toc-overlay-icon toc-content-icon" for="__toc">
<i class="icon"><svg><use href="#svg-toc"></use></svg></i>
</label>
<section id="themed-icons">
<h1>Themed Icons<a class="headerlink" href="#themed-icons" title="Permalink to this headline">#</a></h1>
<p>The <code class="docutils literal notranslate"><span class="pre">GtkIconTheme</span></code> API gives access to icons that are shipped with the icon
theme.</p>
<p>Icon themes are sets of icons that share a common look and feel; a theme is a
mapping between a name and an icon file and size.</p>
<div class="admonition note">
<p class="admonition-title">Note</p>
<p>For more information on icon themes, you can read the freedesktop.org <a class="reference external" href="https://specifications.freedesktop.org/icon-theme-spec/icon-theme-spec-latest.html">icon
theme specification</a></p>
</div>
<section id="extending-the-icon-theme">
<h2>Extending the icon theme<a class="headerlink" href="#extending-the-icon-theme" title="Permalink to this headline">#</a></h2>
<p>Some times, applications need icons that are too domain-specific to be included
in a generic icon theme.</p>
<p>The standard practice for this is to extend the icon theme by installing the
icons in a directory structure that matches the hicolor icon theme. Typically,
the icons will be located in your application’s datadir, e.g.
<code class="docutils literal notranslate"><span class="pre">/usr/share/org.gnome.YourApp</span></code>.</p>
<p>For instance, you can install icons from your Meson build file:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="c1"># Define PKG_DATADIR as a global symbol</span>
<span class="n">pkg_datadir</span> <span class="o">=</span> <span class="n">get_option</span><span class="p">(</span><span class="s1">&#39;prefix&#39;</span><span class="p">)</span> <span class="o">/</span> <span class="n">get_option</span><span class="p">(</span><span class="s1">&#39;datadir&#39;</span><span class="p">)</span> <span class="o">/</span> <span class="n">meson</span><span class="o">.</span><span class="n">project_name</span><span class="p">()</span>
<span class="n">add_project_arguments</span><span class="p">(</span><span class="s1">&#39;-DPKG_DATADIR=@0@&#39;</span><span class="o">.</span><span class="n">format</span><span class="p">(</span><span class="n">datadir</span><span class="p">),</span> <span class="n">language</span><span class="p">:</span> <span class="s1">&#39;c&#39;</span><span class="p">)</span>
<span class="n">action_icons_dir</span> <span class="o">=</span> <span class="n">pkg_datadir</span> <span class="o">/</span> <span class="s1">&#39;icons/hicolor/16x16/actions&#39;</span>
<span class="n">action_icons</span> <span class="o">=</span> <span class="p">[</span>
<span class="s1">&#39;action-name-1.png&#39;</span><span class="p">,</span>
<span class="s1">&#39;action-name-2.png&#39;</span><span class="p">,</span>
<span class="p">]</span>
<span class="n">install_data</span><span class="p">(</span><span class="n">action_icons</span><span class="p">,</span> <span class="n">install_dir</span><span class="p">:</span> <span class="n">action_icons_dir</span><span class="p">)</span>
</pre></div>
</div>
<p>You will also need to tell <code class="docutils literal notranslate"><span class="pre">GtkIconTheme</span></code> to look in that directory:</p>
<div class="sphinx-tabs docutils container">
<div aria-label="Tabbed content" class="closeable" role="tablist"><button aria-controls="panel-0-Qw==" aria-selected="true" class="sphinx-tabs-tab code-tab group-tab" id="tab-0-Qw==" name="Qw==" role="tab" tabindex="0">C</button><button aria-controls="panel-0-UHl0aG9u" aria-selected="false" class="sphinx-tabs-tab code-tab group-tab" id="tab-0-UHl0aG9u" name="UHl0aG9u" role="tab" tabindex="-1">Python</button><button aria-controls="panel-0-VmFsYQ==" aria-selected="false" class="sphinx-tabs-tab code-tab group-tab" id="tab-0-VmFsYQ==" name="VmFsYQ==" role="tab" tabindex="-1">Vala</button><button aria-controls="panel-0-SmF2YVNjcmlwdA==" aria-selected="false" class="sphinx-tabs-tab code-tab group-tab" id="tab-0-SmF2YVNjcmlwdA==" name="SmF2YVNjcmlwdA==" role="tab" tabindex="-1">JavaScript</button></div><div aria-labelledby="tab-0-Qw==" class="sphinx-tabs-panel code-tab group-tab" id="panel-0-Qw==" name="Qw==" role="tabpanel" tabindex="0"><div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">GtkIconTheme</span><span class="w"> </span><span class="o">*</span><span class="n">theme</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">gtk_icon_theme_get_for_display</span><span class="w"> </span><span class="p">(</span><span class="n">gdk_display_get_default</span><span class="w"> </span><span class="p">());</span><span class="w"></span>
<span class="n">gtk_icon_theme_append_search_path</span><span class="w"> </span><span class="p">(</span><span class="n">theme</span><span class="p">,</span><span class="w"> </span><span class="n">PKG_DATADIR</span><span class="w"> </span><span class="s">&quot;/icons&quot;</span><span class="p">);</span><span class="w"></span>
</pre></div>
</div>
</div><div aria-labelledby="tab-0-UHl0aG9u" class="sphinx-tabs-panel code-tab group-tab" hidden="true" id="panel-0-UHl0aG9u" name="UHl0aG9u" role="tabpanel" tabindex="0"><div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="n">theme</span> <span class="o">=</span> <span class="n">Gtk</span><span class="o">.</span><span class="n">IconTheme</span><span class="o">.</span><span class="n">get_for_display</span><span class="p">(</span><span class="n">Gdk</span><span class="o">.</span><span class="n">Display</span><span class="o">.</span><span class="n">get_default</span><span class="p">())</span>
<span class="n">theme</span><span class="o">.</span><span class="n">append_search_path</span><span class="p">(</span><span class="n">os</span><span class="o">.</span><span class="n">path</span><span class="o">.</span><span class="n">join</span><span class="p">(</span><span class="n">PKG_DATADIR</span><span class="p">,</span> <span class="s2">&quot;icons&quot;</span><span class="p">))</span>
</pre></div>
</div>
</div><div aria-labelledby="tab-0-VmFsYQ==" class="sphinx-tabs-panel code-tab group-tab" hidden="true" id="panel-0-VmFsYQ==" name="VmFsYQ==" role="tabpanel" tabindex="0"><div class="highlight-vala notranslate"><div class="highlight"><pre><span></span><span class="kd">var</span><span class="w"> </span><span class="n">theme</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">Gtk</span><span class="p">.</span><span class="n">IconTheme</span><span class="p">.</span><span class="n">get_for_display</span><span class="w"> </span><span class="p">(</span><span class="n">Gdk</span><span class="p">.</span><span class="n">Display</span><span class="p">.</span><span class="n">get_default</span><span class="w"> </span><span class="p">());</span><span class="w"></span>
<span class="n">theme</span><span class="p">.</span><span class="n">append_search_path</span><span class="w"> </span><span class="p">(</span><span class="n">PKG_DATADIR</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s">&quot;/icons&quot;</span><span class="p">);</span><span class="w"></span>
</pre></div>
</div>
</div><div aria-labelledby="tab-0-SmF2YVNjcmlwdA==" class="sphinx-tabs-panel code-tab group-tab" hidden="true" id="panel-0-SmF2YVNjcmlwdA==" name="SmF2YVNjcmlwdA==" role="tabpanel" tabindex="0"><div class="highlight-js notranslate"><div class="highlight"><pre><span></span><span class="kd">const</span><span class="w"> </span><span class="nx">theme</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Gtk</span><span class="p">.</span><span class="nx">IconTheme</span><span class="p">.</span><span class="nx">get_for_display</span><span class="p">(</span><span class="nx">Gdk</span><span class="p">.</span><span class="nx">Display</span><span class="p">.</span><span class="nx">get_default</span><span class="p">());</span><span class="w"></span>
<span class="nx">theme</span><span class="p">.</span><span class="nx">append_search_path</span><span class="p">(</span><span class="nx">PKG_DATADIR</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s2">&quot;/icons&quot;</span><span class="p">);</span><span class="w"></span>
</pre></div>
</div>
</div></div>
<p>It is recommended to follow the principles of the <a class="reference external" href="https://specifications.freedesktop.org/icon-naming-spec/icon-naming-spec-latest.html">icon naming specification</a>
even for these private icons.</p>
<p>This approach to icon theme extension has some advantages over others:</p>
<ul class="simple">
<li><p>the application-specific icons don’t pollute the shared namespace for themed
icons, and other applications won’t unintentionally pick up an icon that was
only meant for your application</p></li>
<li><p>since the icons are installed into a directory below ‘hicolor’, the theme can
override the icons to make your application fit in with the rest of the system</p></li>
</ul>
</section>
<section id="resources">
<h2>Resources<a class="headerlink" href="#resources" title="Permalink to this headline">#</a></h2>
<p>It is possible to include application-specific icons directly in the application
binary as resources, instead of installing them in the file system. By using
resources you reduce the performance penalty of seeking files on the file
system, and you improve the portability and reliability of your application. The
downsides are that changing icons requires rebuilding your application, and that
the size of the binary grows.</p>
<p>To use resources, place your icons in a directory structure that matches the
hicolor icon theme:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="o">&lt;</span><span class="n">gresources</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">gresource</span> <span class="n">prefix</span><span class="o">=</span><span class="s2">&quot;/my/resources/icons/16x16/actions&quot;</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">file</span><span class="o">&gt;</span><span class="n">icon1</span><span class="o">.</span><span class="n">png</span><span class="o">&lt;/</span><span class="n">file</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">file</span><span class="o">&gt;</span><span class="n">icon2</span><span class="o">.</span><span class="n">png</span><span class="o">&lt;/</span><span class="n">file</span><span class="o">&gt;</span>
<span class="o">...</span>
<span class="o">&lt;/</span><span class="n">gresource</span><span class="o">&gt;</span>
<span class="o">&lt;/</span><span class="n">gresources</span><span class="o">&gt;</span>
</pre></div>
</div>
<div class="admonition note">
<p class="admonition-title">Note</p>
<p>When using resources, we don’t include ‘hicolor’ in the path.</p>
</div>
<p>Then, tell <code class="docutils literal notranslate"><span class="pre">GtkIconTheme</span></code> about the resource path where your icons are located:</p>
<div class="sphinx-tabs docutils container">
<div aria-label="Tabbed content" class="closeable" role="tablist"><button aria-controls="panel-1-Qw==" aria-selected="true" class="sphinx-tabs-tab code-tab group-tab" id="tab-1-Qw==" name="Qw==" role="tab" tabindex="0">C</button><button aria-controls="panel-1-UHl0aG9u" aria-selected="false" class="sphinx-tabs-tab code-tab group-tab" id="tab-1-UHl0aG9u" name="UHl0aG9u" role="tab" tabindex="-1">Python</button><button aria-controls="panel-1-VmFsYQ==" aria-selected="false" class="sphinx-tabs-tab code-tab group-tab" id="tab-1-VmFsYQ==" name="VmFsYQ==" role="tab" tabindex="-1">Vala</button><button aria-controls="panel-1-SmF2YVNjcmlwdA==" aria-selected="false" class="sphinx-tabs-tab code-tab group-tab" id="tab-1-SmF2YVNjcmlwdA==" name="SmF2YVNjcmlwdA==" role="tab" tabindex="-1">JavaScript</button></div><div aria-labelledby="tab-1-Qw==" class="sphinx-tabs-panel code-tab group-tab" id="panel-1-Qw==" name="Qw==" role="tabpanel" tabindex="0"><div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">GtkIconTheme</span><span class="w"> </span><span class="o">*</span><span class="n">theme</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">gtk_icon_theme_get_for_display</span><span class="w"> </span><span class="p">(</span><span class="n">gdk_display_get_default</span><span class="w"> </span><span class="p">());</span><span class="w"></span>
<span class="n">gtk_icon_theme_add_resource_path</span><span class="w"> </span><span class="p">(</span><span class="n">theme</span><span class="p">,</span><span class="w"> </span><span class="s">&quot;/my/resources/icons&quot;</span><span class="p">);</span><span class="w"></span>
</pre></div>
</div>
</div><div aria-labelledby="tab-1-UHl0aG9u" class="sphinx-tabs-panel code-tab group-tab" hidden="true" id="panel-1-UHl0aG9u" name="UHl0aG9u" role="tabpanel" tabindex="0"><div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="n">theme</span> <span class="o">=</span> <span class="n">Gtk</span><span class="o">.</span><span class="n">IconTheme</span><span class="o">.</span><span class="n">get_for_display</span><span class="p">(</span><span class="n">Gdk</span><span class="o">.</span><span class="n">Display</span><span class="o">.</span><span class="n">get_default</span><span class="p">())</span>
<span class="n">theme</span><span class="o">.</span><span class="n">add_resource_path</span><span class="p">(</span><span class="s2">&quot;/my/resources/icons&quot;</span><span class="p">)</span>
</pre></div>
</div>
</div><div aria-labelledby="tab-1-VmFsYQ==" class="sphinx-tabs-panel code-tab group-tab" hidden="true" id="panel-1-VmFsYQ==" name="VmFsYQ==" role="tabpanel" tabindex="0"><div class="highlight-vala notranslate"><div class="highlight"><pre><span></span><span class="kd">var</span><span class="w"> </span><span class="n">theme</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">Gtk</span><span class="p">.</span><span class="n">IconTheme</span><span class="p">.</span><span class="n">get_for_display</span><span class="w"> </span><span class="p">(</span><span class="n">Gdk</span><span class="p">.</span><span class="n">Display</span><span class="p">.</span><span class="n">get_default</span><span class="w"> </span><span class="p">());</span><span class="w"></span>
<span class="n">theme</span><span class="p">.</span><span class="n">add_resource_path</span><span class="w"> </span><span class="p">(</span><span class="s">&quot;/my/resources/icons&quot;</span><span class="p">);</span><span class="w"></span>
</pre></div>
</div>
</div><div aria-labelledby="tab-1-SmF2YVNjcmlwdA==" class="sphinx-tabs-panel code-tab group-tab" hidden="true" id="panel-1-SmF2YVNjcmlwdA==" name="SmF2YVNjcmlwdA==" role="tabpanel" tabindex="0"><div class="highlight-js notranslate"><div class="highlight"><pre><span></span><span class="kd">const</span><span class="w"> </span><span class="nx">theme</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Gtk</span><span class="p">.</span><span class="nx">IconTheme</span><span class="p">.</span><span class="nx">get_for_display</span><span class="p">(</span><span class="nx">Gdk</span><span class="p">.</span><span class="nx">Display</span><span class="p">.</span><span class="nx">get_default</span><span class="p">());</span><span class="w"></span>
<span class="nx">theme</span><span class="p">.</span><span class="nx">add_resource_path</span><span class="p">(</span><span class="s2">&quot;/my/resources/icons&quot;</span><span class="p">);</span><span class="w"></span>
</pre></div>
</div>
</div></div>
</section>
<section id="automatic-resources">
<h2>Automatic resources<a class="headerlink" href="#automatic-resources" title="Permalink to this headline">#</a></h2>
<p><code class="docutils literal notranslate"><span class="pre">GtkApplication</span></code> automatically sets up a resource path based on the
application id of your application. If your applications id is ‘org.my.App’,
then icons will be looked for under “/org/my/App/icons”.</p>
</section>
<section id="flipped-icons">
<h2>Flipped icons<a class="headerlink" href="#flipped-icons" title="Permalink to this headline">#</a></h2>
<p>Some icons benefit from being ‘flipped’ in right-to-left (RTL) locales. GTK does
this automatically, by passing a <code class="docutils literal notranslate"><span class="pre">GTK_ICON_LOOKUP_DIR_RTL</span></code> or
<code class="docutils literal notranslate"><span class="pre">GTK_ICON_LOOKUP_DIR_LTR</span></code> flag to <code class="docutils literal notranslate"><span class="pre">GtkIconTheme</span></code> when loading icons.</p>
<p>If you are loading icons manually using the <code class="docutils literal notranslate"><span class="pre">GtkIconTheme</span> <span class="pre">API</span></code>, you may want to do
the same for icons where flipping is relevant.</p>
<p>Of course, RTL variants must be present in the icon theme for this to make any
difference. If you have an icon with an RTL variant, you should append the
<code class="docutils literal notranslate"><span class="pre">-rtl</span></code> suffix to the icon’s file base name.</p>
</section>
<section id="symbolic-icons">
<h2>Symbolic icons<a class="headerlink" href="#symbolic-icons" title="Permalink to this headline">#</a></h2>
<p>Symbolic icons have a simple form, and can be used much like text. They will be
recolored according to the context in which they are used. By convention,
symbolic icons are named with a <code class="docutils literal notranslate"><span class="pre">-symbolic</span></code> suffix.</p>
<p>Passing an icon name like “pan-start-symbolic” to GTK functions like
<code class="docutils literal notranslate"><span class="pre">gtk_image_set_from_icon_name()</span></code> will automatically do the right thing. When
you are manually loading a symbolic icon using the <code class="docutils literal notranslate"><span class="pre">GtkIconTheme</span></code> APIs, make sure
to use the ‘symbolic’ variants, such as <code class="docutils literal notranslate"><span class="pre">gtk_icon_info_load_symbolic()</span></code> to ensure
that the icon is properly colored.</p>
<p>When installing your own symbolic icons, you can either install an svg (the
traditional form in which symbolic icons are created) or use the
<code class="docutils literal notranslate"><span class="pre">gtk-encode-symbolic-svg</span></code> utility to convert the icon into specially crafted
<code class="docutils literal notranslate"><span class="pre">.symbolic.png</span></code> files, which can be installed into the fixed-size subdirectories
of the icon theme:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">gtk</span><span class="o">-</span><span class="n">encode</span><span class="o">-</span><span class="n">symbolic</span><span class="o">-</span><span class="n">svg</span> <span class="o">-</span><span class="n">o</span> <span class="o">/</span><span class="n">usr</span><span class="o">/</span><span class="n">share</span><span class="o">/</span><span class="n">icons</span><span class="o">/</span><span class="n">hicolor</span><span class="o">/</span><span class="mi">48</span><span class="n">x48</span><span class="o">/</span><span class="n">apps</span> <span class="n">my</span><span class="o">-</span><span class="n">app</span><span class="o">-</span><span class="n">symbolic</span><span class="o">.</span><span class="n">svg</span> <span class="mi">48</span><span class="n">x48</span>
</pre></div>
</div>
</section>
<section id="application-icons">
<h2>Application icons<a class="headerlink" href="#application-icons" title="Permalink to this headline">#</a></h2>
<p>The icon theme specification defines a universal fallback theme, called hicolor,
in which applications can install icons that need to be known by the rest of the
system.</p>
<p>The main example for this is the application icon that is used in the
applications desktop file. This icon should be named to match the application
name, and be installed in <code class="docutils literal notranslate"><span class="pre">/usr/share/icons/hicolor/48x48/apps/</span></code>. Other sizes are
optional, but a 256×256 icon is the default size used by GNOME in its
application grid, so you’re strongly encouraged to provide one.</p>
<p>Applications are also encouraged to install a symbolic version of the
application icon into the hicolor theme, with the same name and a <code class="docutils literal notranslate"><span class="pre">-symbolic</span></code>
suffix. The symbolic icon will be used in the HighContrast theme. Symbolic icons
can be installed as SVG, in the <code class="docutils literal notranslate"><span class="pre">/usr/share/icons/hicolor/symbolic/apps</span></code> directory
(which was added to hicolor in 0.15), or as <code class="docutils literal notranslate"><span class="pre">.symbolic.png</span></code> files in
<code class="docutils literal notranslate"><span class="pre">/usr/share/icons/hicolor/48x48/apps/</span></code>. Other sizes are optional.</p>
<div class="admonition note">
<p class="admonition-title">Note</p>
<p>Unlike other icons, application icons cannot be added to a GResource, as they
are referenced by the desktop file and loaded by the desktop.</p>
</div>
</section>
</section>
</article>
<footer>
<div class="related-pages">
<a class="next-page" href="deprecations.html">
<div class="page-info">
<div class="context">
<span>Next</span>
</div>
<div class="title">Dealing With Deprecations</div>
</div>
<svg><use href="#svg-arrow-right"></use></svg>
</a>
<a class="prev-page" href="notifications.html">
<svg><use href="#svg-arrow-right"></use></svg>
<div class="page-info">
<div class="context">
<span>Previous</span>
</div>
<div class="title">Using Notifications</div>
</div>
</a>
</div>
</footer>
</div>
<aside class="toc-drawer">
<div class="toc-sticky toc-scroll">
<div class="toc-title-container">
<span class="toc-title">
Contents
</span>
</div>
<div class="toc-tree-container">
<div class="toc-tree">
<ul>
<li><a class="reference internal" href="#">Themed Icons</a><ul>
<li><a class="reference internal" href="#extending-the-icon-theme">Extending the icon theme</a></li>
<li><a class="reference internal" href="#resources">Resources</a></li>
<li><a class="reference internal" href="#automatic-resources">Automatic resources</a></li>
<li><a class="reference internal" href="#flipped-icons">Flipped icons</a></li>
<li><a class="reference internal" href="#symbolic-icons">Symbolic icons</a></li>
<li><a class="reference internal" href="#application-icons">Application icons</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</aside>
</main>
</div><script data-url_root="../" id="documentation_options" src="../_static/documentation_options.js"></script>
<script src="../_static/jquery.js"></script>
<script src="../_static/underscore.js"></script>
<script src="../_static/doctools.js"></script>
<script src="../_static/scripts/furo.js"></script>
<script src="../_static/tabs.js"></script>
</body>
</html>