From fe894ca05638485746d1cbf287afd9267e029012 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Sun, 7 Nov 2021 22:05:11 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20Adds=20screenshot=20for=20mdi-?= =?UTF-8?q?=20icons?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/icons.md | 31 +++++++++++++++++-------------- 1 file changed, 17 insertions(+), 14 deletions(-) diff --git a/docs/icons.md b/docs/icons.md index 74f5b496..681b61fa 100644 --- a/docs/icons.md +++ b/docs/icons.md @@ -8,9 +8,9 @@ Both sections and items can have an icon, which is specified using the `icon` at - [Generative Icons](#generative-icons) - [Emoji Icons](#emoji-icons) - [Home-Lab Icons](#home-lab-icons) +- [Material Icons](#material-design-icons) - [Icons by URL](#icons-by-url) - [Local Icons](#local-icons) -- [Material Icons](#material-design-icons) - [No Icon](#no-icon)

@@ -125,18 +125,6 @@ sections: --- -## Icons by URL -You can also set an icon by passing in a valid URL pointing to the icons location. For example `icon: https://i.ibb.co/710B3Yc/space-invader-x256.png`, this can be in .png, .jpg or .svg format, and hosted anywhere (local or remote) - so long as it's accessible from where you are hosting Dashy. The icon will be automatically scaled to fit, however loading in a lot of large icons may have a negative impact on performance, especially if you visit Dashy from new devices often. - ---- - -## Local Icons -You may also want to store your icons locally, bundled within Dashy so that there is no reliance on outside services. This can be done by putting the icons within Dashy's `./public/item-icons/` directory. If you are using Docker, then the easiest option is to map a volume from your host system, for example: `-v /local/image/directory:/app/public/item-icons/`. To reference an icon stored locally, just specify it's name and extension. For example, if my icon was stored in `/app/public/item-icons/maltrail.png`, then I would just set `icon: maltrail.png`. - -You can also use sub-folders within the `item-icons` directory to keep things organized. You would then specify an icon with it's folder name slash image name. For example: `networking/monit.png` - ---- - ## Material Design Icons Dashy also supports 5000+ [material-design-icons](https://github.com/Templarian/MaterialDesign). To use these, first find the name/ slug for your icon [here](https://dev.materialdesignicons.com/icons), and then prefix is with `mdi-`. @@ -151,9 +139,24 @@ sections: icon: mdi-fire - title: Dino Icon icon: mdi-google-downasaur - ``` +

+ +

+ +--- + +## Icons by URL +You can also set an icon by passing in a valid URL pointing to the icons location. For example `icon: https://i.ibb.co/710B3Yc/space-invader-x256.png`, this can be in .png, .jpg or .svg format, and hosted anywhere (local or remote) - so long as it's accessible from where you are hosting Dashy. The icon will be automatically scaled to fit, however loading in a lot of large icons may have a negative impact on performance, especially if you visit Dashy from new devices often. + +--- + +## Local Icons +You may also want to store your icons locally, bundled within Dashy so that there is no reliance on outside services. This can be done by putting the icons within Dashy's `./public/item-icons/` directory. If you are using Docker, then the easiest option is to map a volume from your host system, for example: `-v /local/image/directory:/app/public/item-icons/`. To reference an icon stored locally, just specify it's name and extension. For example, if my icon was stored in `/app/public/item-icons/maltrail.png`, then I would just set `icon: maltrail.png`. + +You can also use sub-folders within the `item-icons` directory to keep things organized. You would then specify an icon with it's folder name slash image name. For example: `networking/monit.png` + --- ## No Icon