summaryrefslogtreecommitdiff
path: root/chromium/docs/website/site/developers/updating-webui-for-material-design/using-polymer-icons/index.md
diff options
context:
space:
mode:
Diffstat (limited to 'chromium/docs/website/site/developers/updating-webui-for-material-design/using-polymer-icons/index.md')
-rw-r--r--chromium/docs/website/site/developers/updating-webui-for-material-design/using-polymer-icons/index.md91
1 files changed, 0 insertions, 91 deletions
diff --git a/chromium/docs/website/site/developers/updating-webui-for-material-design/using-polymer-icons/index.md b/chromium/docs/website/site/developers/updating-webui-for-material-design/using-polymer-icons/index.md
deleted file mode 100644
index fb8012a4e52..00000000000
--- a/chromium/docs/website/site/developers/updating-webui-for-material-design/using-polymer-icons/index.md
+++ /dev/null
@@ -1,91 +0,0 @@
----
-breadcrumbs:
-- - /developers
- - For Developers
-- - /developers/updating-webui-for-material-design
- - Updating WebUI for Material Design
-page_name: using-polymer-icons
-title: Adding SVG icons
----
-
-SVG icons should be added to a common iconset, or an iconset for your WebUI.
-These can be custom SVG icons or copies of Polymer's
-`[iron-icons](https://github.com/PolymerElements/iron-icons)`.
-
-## Creating an iconset
-
-To create the iconset your WebUI will use, copy the format of an existing icons
-file (e.g.,
-[cr_elements/icons.html](https://source.chromium.org/chromium/chromium/src/+/HEAD:ui/webui/resources/cr_elements/icons.html)).
-Change the name of the `iron-iconset-svg` for your WebUI, and add the SVGs you
-need (see below). Example:
-
-```none
-<iron-iconset-svg name="downloads" size="24">
-  <svg>
-    <defs>
-      <g id="foo">...</g>
-      ...
-    </defs>
-  </svg>
-</iron-iconset-svg>
-```
-
-## Adding icon definitions
-
-### For Polymer icons from iron-icons:
-
-* Find the SVG `<g>` icon definitions you need in
- [PolymerElements/iron-icons](https://github.com/PolymerElements/iron-icons).
-* Copy the SVG definitions.
-* Insert each line (alphabetically) into the appropriate `icons.html`
- file for your WebUI. (For commonly used icons, use
- `cr_elements/icons.html`.)
-
-### For custom icons:
-
-You can include custom icons or [Google Material
-icons](https://design.google.com/icons/) in the same iconset, but mention their
-source in a comment. Icons exported from GUI tools often are messy; please
-**minify custom icons** by flattening transforms, removing meta tags like
-`<title>`, and rounding weird numbers like 30.0002118. The [SVGOMG
-optimizer](https://jakearchibald.github.io/svgomg/) does most of this for you;
-use it.
-
-If the icon is not the same size as the iconset, either scale it to size, or
-ensure the `<g id="foo">` tag includes the `viewBox` attribute with the original
-dimensions. Some code (settings) has multiple iconsets (e.g. "cr" vs. "cr20")
-depending on the export size. You can skip the viewBox if you put the icon in
-the right set.
-
-Unless color is important (e.g. a Chromium logo), **remove hard-coded colors**
-(e.g. `fill="#000"`) so our WebUI can specify colors in CSS.
-
-## Using icons
-
-Import the relevant `icons.html` from your UI **instead of** importing Polymer's
-`iron-icons.html` (which would load almost a thousand SVGs).
-
-Use the icon in your UI with your custom iconset name prefix wherever you need
-an icon name (`iron-icon`, `paper-icon-button`, etc.):
-
-```none
-<link rel="import" href="chrome://downloads/icons.html">
-<iron-icon icon="downloads:warning"></iron-icon>
-```
-
-## Common icons
-
-A few icons are used in many pages. These can be found in
-`[cr_elements/icons.html](https://code.google.com/p/chromium/codesearch#chromium/src/ui/webui/resources/cr_elements/icons.html&q=file:cr_elements/icons%5C.html&sq=package:chromium&type=cs&l=1)`
-under the iconset name "`cr`". Having frequently-used icons here prevents
-excessive duplication of SVG definitions while keeping imports small across all
-pages.
-
-To use these icons, simply import `cr_elements/icons.html` and use the `cr`
-prefix:
-
-```none
-<link rel="import" href="chrome://resources/cr_elements/icons.html">
-<iron-icon icon="cr:cancel"></iron-icon>
-``` \ No newline at end of file