How to replace wingpanel's “Applications” text with a icon in Elementary OS 5.1 Hera

Question

I was wondering how I go about replacing the text at the top left of the wingpanel from Applications to the official Elementary OS logo. Can anyone please help me there is a similar question posted on this site but doesn't work for the current version of OS. The link to the similar questoin is '''How to replace wingpanel's "Applications" text with a icon in Freya'''

Answer 1

The final solution: How to replace the magnifier/search icon using Inkscape

See like this as an example:

 /usr/share/icons/McMojave-circle-dark/actions/symbolic/system-search-symbolic.svg

So replace the icon using

sudo inkscape (to run as root) 

with the elementary OS logo. I suppose you know how to open the mentioned svg file in Inkscape and do it. Save it. Then hide the Applications name using my method described above and the issue is solved.

Examples of paths where the icon can be stored:

/usr/share/icons/Adwaita/16x16/actions/system-search-symbolic.symbolic.png
/usr/share/icons/Adwaita/24x24/actions/system-search-symbolic.symbolic.png
/usr/share/icons/Adwaita/32x32/actions/system-search-symbolic.symbolic.png
/usr/share/icons/Adwaita/48x48/actions/system-search-symbolic.symbolic.png
/usr/share/icons/Adwaita/64x64/actions/system-search-symbolic.symbolic.png
/usr/share/icons/Adwaita/96x96/actions/system-search-symbolic.symbolic.png
/usr/share/icons/Adwaita/scalable/actions/system-search-symbolic.svg
/usr/share/icons/McMojave-circle/actions/symbolic/system-search-symbolic.svg
/usr/share/icons/McMojave-circle-dark/actions/symbolic/system-search-symbolic.svg
/usr/share/icons/Paper/scalable/actions/system-search-symbolic.svg
/usr/share/icons/elementary/actions/24/system-search-symbolic.svg
/usr/share/icons/elementary/actions/symbolic/system-search-symbolic.svg

Or just replace the file. Zipped logos for you.

Zipped logos in new format

Zipped logo in old format

Explanation: Types of Elementary OS logo

OR //update Feb2021 go to usr/share/icons/Themename/actions/symbolic/ and rename the system-search-symbolic.svg file to something else ,say system-search-symbolic1.svg and save the icon you intend to use as system-search-symbolic.svg. This is a low skill ,reversible workaround for the guys who are not to confident with command promt or editing .css files.

Answer 2

Solution which removes Applications name from the panel

If you do not have vim, then install it with below command in terminal:

sudo apt install vim

Then type in terminal for example like below: (bear in mind that Nordic is a name of my theme which I am using currently, the default one is /usr/share/themes/elementary/gtk-3.0/gtk.css)

 sudo vim /usr/share/themes/Nordic/gtk-3.0/gtk.css

hit button with symbol / on a keyboard type .panel.maximized to find this section and hit enter.

hit insert to edit file

comment it out like that for example:

/** .panel.maximized {
    background-color: #000; }
 **/

and then put this into this file below the commented our fragment:

.panel.maximized > .horizontal:first-child > :first-child, 
.panel.color-dark > .horizontal:first-child > :first-child {
    font-size:0px;
}

hit esc on a keyboard and then type :x and hit enter to save and exit.

Log out and log in again. Applications text will disappear.

Source: Remove the Applications text on the top panel in Elementary OS

Answer 3

For elementary-x theme you need to edit it here:

/home/yourusername/.themes/elementary-x/gtk-3.0/apps.css

or if you have it in:

/usr/share/themes/elementary-x/gtk-3.0/apps.css

Depends on where did you install the theme for user or for all users.

https://github.com/surajmandalcell/elementary-x/blob/master/README.md

As you can read here:

 git clone https://github.com/surajmandalcell/elementary-x.git ~/.themes/elementary-x

This copies the git to user location.

 sudo mv /home/yourusername/.themes/elementary-x /usr/share/themes

will move it to the location where the theme will be accessible for all users - just an explanation for those who have only one machine and many users.

Check this: https://github.com/surajmandalcell/elementary-x/blob/master/gtk-3.0/apps.css

So the tutorial will look like this below:

Type in terminal for example like below: (bear in mind that elementary-x is a name of my theme which I am using currently, the default one is /usr/share/themes/elementary/gtk-3.0/gtk.css)

sudo vim /usr/share/themes/elementary-x/gtk-3.0/apps.css

hit button with symbol / on a keyboard type .panel.maximized to find this section and hit enter.

hit insert to edit file

comment it out like that for example:

/** .panel.maximized {
     background-color: #000; }
 **/

and then put this into this file below the commented our fragment:

.panel.maximized > .horizontal:first-child > :first-child, 
.panel.color-dark > .horizontal:first-child > :first-child {
    font-size:0px;
}

hit esc on a keyboard and then type :x and hit enter to save and exit.

Log out and log in again. Applications text will disappear.

Answer 4

This solution is wrong, below is correct solution. Treat this as a way of investigation, please.

Above

 /** .panel.maximized {
    background-color: #000; }
 **/

You will find:

/*********
 * Panel *
 ********/
.panel {
  background-color: transparent;
  transition: all 100ms ease-in-out;}

Change it to:

/*********
 * Panel *
 ********/
.panel {
  background-color: transparent;
  transition: all 100ms ease-in-out;
  background-image: url("elementaryicon.png");
  background-repeat: no-repeat;
  font-size:0px !important; }

And put the elementary os icon 15x15 px or 20x20 px in directory where gtk.css or apps.css file is located. See guide above.

The only one thing left to solve it - how to get rid the magnifier icon.

Small edit:

The text is hard-coded here: https://github.com/elementary/applications-menu/blob/master/src/Indicator.vala#L75, and the icon three lines below that: https://github.com/elementary/applications-menu/blob/master/src/Indicator.vala#L78

I also wish they were customizable, but I doubt upstream is interested in supporting this kind of minor tweak (The elementary OS design is intended to be good enough that small tweaks like this are not important).

Anyway I will try to download it and recompile it the way I want. Just need to figure it out, where or how this search icon is rendered. Then the simple replacement and recompilation should just replace the search icon with the Elementary OS logo.