Generar una librería de iconos de Material Design

El objetivo final es disponer de una librería lista para usar en nuestros informes de Power BI, en la que baste con seleccionar el nombre del icono, su tamaño y el color y ubicarlo en la posición deseada de nuestros informes. Con ello conseguiremos mejorar su usabilidad y su aspecto visual sin perder tiempo en la configuración.

Para llevarlo a cabo nos valdremos del objeto visual "HTML Content" y utilizaremos la librería gratuita de iconos de Material Design (Google).

Al final de este artículo puedes solicitar la descarga de los archivos y ahorrarte todos los pasos.

El proceso a seguir será el siguiente:

1. Descargar todos los recursos gráficos de los iconos de Material Design a través del siguiente enlace de Github. Es un fichero zip bastante pesado. El enlace de descarga se encuentra en la página indicada o también puede descargarse directamente desde aquí.
2. Descomprimir el fichero y guardar la carpeta raíz del mismo en una ubicación a la que podamos conectarnos con Power BI.
3. Abrir Power BI Desktop e instalar y habilitar el objeto visual "HTML Content": Mediante este objeto podemos incorporar código html a nuestros informes.
4. Ir a la opción de Transformar Datos de Power BI Desktop, y desde allí crear dos tablas manualmente (opción "Especificar datos" del menú Inicio). Una tabla contendrá el tamaño de los iconos, y la otra los códigos de color. No conviene abusar del tamaño de ambas tablas para que ello no comprometa el rendimiento de nuestros informes. Las estructura y nombre de las tablas creadas para este ejemplo es la mostrada. Ambas tablas no las necesitaremos posteriormente en el modelo de datos, por lo que deshabilitaremos su carga.

5. Aún desde la aplicación de transformar datos integrada en Power BI Desktop, crear una nueva consulta. En este caso nosotros la hemos llamado "_icons". Será nuestra librería. La generaremos mediante una conexión a la carpeta descomprimida de Material Design Icons (indicar como origen de datos en Power BI: carpeta). Dicha carpeta descomprimida contiene todos los iconos de Material Design agrupados por categoría y en diferentes formatos. Nosotros extraeremos solo los ficheros en formato vectorial "svg" mediante un proceso de transformación que detallamos a continuación.
6. Aplicaremos transformaciones a los datos. Estas transformaciones consisten fundamentalmente en extraer el código svg de cada icono, seleccionar los datos de interés, limpiar los datos y generar para cada icono la combinación de color y tamaño que hemos indicado en las tablas "icon_size" y "icon_colors". Para la transformación nos ayudaremos de dos funciones. Tanto el código de la transformación, como el de las dos funciones se muestra a continuación. Tener en cuenta que en la consulta de transformación deberemos sustituir #"Carpeta del archivo de Material Design Icons descomprimido" por la ruta del fichero descomprimido.

(IconContent)=>
    let
        #"Texto importado" = Table.FromColumns({Lines.FromBinary(IconContent,null,null,1252)}),
        #"Tabla transpuesta" = Table.Transpose(#"Texto importado"),
        #"CombinarTodas"= Table.CombineColumns ( #"Tabla transpuesta", List.Select ( Table.ColumnNames ( #"Tabla transpuesta" ), each Text.StartsWith ( _, "Column" ) ), Text.Combine, "Column1" )
    in
        #"CombinarTodas"

Función fnExtractSVG: Se aplica a cada icono y compone el código SVG.

(svg_code, size, colour)=>
    let
        Origen= Text.Replace(svg_code,"width=""24""",Text.Combine({"width=", """", size , """"})),
        SizeSVGColor= Text.Replace(Origen,"height=""24""",Text.Combine({"height=", """", size , """"})),
        FinalSVGCode= Text.Replace(SizeSVGColor,"""/>",Text.Combine({""""," fill=", """", colour , """","/>"}))
    in
        FinalSVGCode

Función fnSetSize_Colour: Inserta las diferentes combinaciones de color y tamaño en el código

let
    IconsFolder=#"Carpeta del archivo de Material Design Icons descomprimido",
    Origen = Folder.Files(IconsFolder),
    #"Filas filtradas" = Table.SelectRows(Origen, each ([Extension] = ".svg")),
    #"Texto insertado entre delimitadores" = Table.AddColumn(#"Filas filtradas", "Texto entre delimitadores", each Text.BetweenDelimiters([Folder Path], Text.Combine({IconsFolder,""}), ""), type text),
    #"Columnas con nombre cambiado" = Table.RenameColumns(#"Texto insertado entre delimitadores",{{"Texto entre delimitadores", "Categoria"}}),
    #"Otras columnas quitadas" = Table.SelectColumns(#"Columnas con nombre cambiado",{"Content", "Name", "Categoria"}),
    #"Filas filtradas1" = Table.SelectRows(#"Otras columnas quitadas", each [Name] <> "MaterialIcons-Regular.svg"), #"Filas filtradas2" = Table.SelectRows(#"Filas filtradas1", each Text.EndsWith([Name], "_24px.svg")),
    #"Texto extraído entre delimitadores" = Table.TransformColumns(#"Filas filtradas2", {{"Name", each Text.BetweenDelimiters(_, "ic_", "_24px.svg"), type text}}),
    #"Columnas reordenadas" = Table.ReorderColumns(#"Texto extraído entre delimitadores",{"Name", "Categoria", "Content"}),
    #"Filas ordenadas" = Table.Sort(#"Columnas reordenadas",{{"Name", Order.Ascending}}),
    #"Duplicados quitados" = Table.Distinct(#"Filas ordenadas", {"Name"}),
    ExtractSVG = Table.AddColumn(#"Duplicados quitados", "svg", each fnExtractSVG([Content]) ),
    #"Se expandió svg" = Table.ExpandTableColumn(ExtractSVG, "svg", {"Column1"}, {"Column1"}),
    #"Columnas quitadas" = Table.RemoveColumns(#"Se expandió svg",{"Content"}),
    AddingSize = Table.AddColumn(#"Columnas quitadas", "size_table", each icon_size ),
    AddingColour = Table.AddColumn(AddingSize, "colour_table", each icon_colors ),
    #"Se expandió size_table" = Table.ExpandTableColumn(AddingColour, "size_table", {"Size"}, {"Size"}),
    #"Se expandió colour_table" = Table.ExpandTableColumn(#"Se expandió size_table", "colour_table", {"Color", "Hex Code"}, {"Color", "Hex Code"}),
    #"Columnas con nombre cambiado1" = Table.RenameColumns(#"Se expandió colour_table",{{"Column1", "SVG"}}),
    FormattingSVGCode = Table.AddColumn(#"Columnas con nombre cambiado1", "new_svg-code", each fnSetSize_Colour([SVG],[Size], [Hex Code])),
    #"Columnas quitadas1" = Table.RemoveColumns(FormattingSVGCode,{"SVG"}),
    #"Columnas con nombre cambiado2" = Table.RenameColumns(#"Columnas quitadas1",{{"new_svg-code", "HTML"}, {"Name", "Nombre"}, {"Size", "Tamaño"}, {"Hex Code", "Color Hex Code"}})
in
    #"Columnas con nombre cambiado2"

Transformación aplicada sobre la consulta "_icons"

7. Cerrar la aplicación de transformación de datos y regresar a Power BI Desktop. Al actualizar los datos, ya tendremos nuestra librería generada y lista para usar.

8. Para incorporar un icono a nuestros informes, bastará insertar el objeto visual "HTML Content", y crear filtros de Categoría, Nombre, Color y Tamaño, tal como muestra la imagen.

9. Si queremos extender el uso de esta librería a nuestra organización, publicaremos nuestro informe en el servicio y promocionaremos el conjunto de datos.

¡Esperamos que os sea de utilidad!