Set Custom APP Icon on APEX

I am creating my WorkSpace on apex.oracle.com to enable an online demo of my posts, then you can check if that is what you want before try it.

Creating a new App, there are only 32 different Icons, but there are not Cat Icons. I wanted to add a Custom Icon, I'll explain how to do it.

First, you need your icon on vector (.svg) format, you can create it using free tools like Inkscape, Paid tools like Illustrator, get it asking a Graphic Designer for help or Searching a free one on Internet. This time Chose the last one and got this Cat Vector. You can find more on that site. Just remember, it is better if the vector has a squared aspect ratio

Rename the .svg file to app-icon.svg and then go to Your App -> Shared Components -> Static Application Files, upload the file and we got it!. our .sgv file is now our app icon and it will appear on APEX WorkSpace, Login Screen and Home Page.





But you can notice that in the Application, the icon has a purple background, but our vector has a transparent background, what if we want it transparent or with other background color?

In the  App -> Shared Components -> Static Application Files, there is an app-icon.css file, this is the content of that file

.app-icon {
    background-image: url(app-icon.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    background-color: #5A68AD;
}
Line 6 is indicating the color, you can edit it with the color you want and upload it again in a file with the same name. I'll use #0076DF, to match the theme color, and now you have a custom Icon with a custom Background.






Comments

  1. Great post!
    I always knew it was possible, I just figured it wouldn't be so easy.
    Can't wait to give it a try :) Thanks!

    ReplyDelete
    Replies
    1. I hope this helps you :D, Thanks for the comment, this motivates me to continue making these posts.

      Delete
    2. It's really working fine :) thanks for it.

      Delete

Post a Comment

Popular posts from this blog

View PDF File on APEX (Simple approach)

ID Basado en trigger y secuencia para todas las tablas - Oracle