Update UI layout code to use new SVG icons

- Add IconWidget, use it for icons instead of ImageWidget.
  Specify icons by name only, look for them (with either
  .svg or .png suffixes) in multiple directories (including
  koreader/settings/icons/ to allow customizing them).
  Don't crash when icon name not found, shown a black
  background warning icon instead.
- Don't trust the icons' native sizes: replace
  scale_for_dpi=true with width/height=DGENERIC_ICON_SIZE,
  so all icons get the same (tunable) size - except in
  a few specific use cases.
- Top and bottom menu bars: normalize, and have icons
  properly centered in them, extend vertical line
  separators up to the edges.
- TOC: adjust expand/collapse icons size to items size

frontend/apps/reader/modules/readerflipping.lua

@@ -1,5 +1,5 @@
 local Geom = require("ui/geometry")
-local ImageWidget = require("ui/widget/imagewidget")
+local IconWidget = require("ui/widget/iconwidget")
 local InputContainer = require("ui/widget/container/inputcontainer")
 local LeftContainer = require("ui/widget/container/leftcontainer")
 local Screen = require("device").screen
@@ -9,8 +9,11 @@ local ReaderFlipping = InputContainer:new{
 }
 
 function ReaderFlipping:init()
-    local widget = ImageWidget:new{
-        file = "resources/icons/appbar.book.open.png",
+    local icon_size = Screen:scaleBySize(32)
+    local widget = IconWidget:new{
+        icon = "book.opened",
+        width = icon_size,
+        height = icon_size,
     }
     self[1] = LeftContainer:new{
         dimen = Geom:new{w = Screen:getWidth(), h = widget:getSize().h},