Example for how to create use a custom SVG icon for a block in Gutenberg

registerblock-custom-icon-gutenberg.js

// Import __ from i18n internationalization library
const { __ } = wp.i18n;
// Import registerBlockType() from block building libary
const { registerBlockType } = wp.blocks;
// Import the element creator function (React abstraction layer)
const el = wp.element.createElement;

/**
 * Example of a custom SVG path taken from fontastic
*/
const iconEl = el('svg', { width: 20, height: 20 },
  el('path', { d: "M12.5,12H12v-0.5c0-0.3-0.2-0.5-0.5-0.5H11V6h1l1-2c-1,0.1-2,0.1-3,0C9.2,3.4,8.6,2.8,8,2V1.5C8,1.2,7.8,1,7.5,1 S7,1.2,7,1.5V2C6.4,2.8,5.8,3.4,5,4C4,4.1,3,4.1,2,4l1,2h1v5c0,0-0.5,0-0.5,0C3.2,11,3,11.2,3,11.5V12H2.5C2.2,12,2,12.2,2,12.5V13 h11v-0.5C13,12.2,12.8,12,12.5,12z M7,11H5V6h2V11z M10,11H8V6h2V11z" } )
);

/**
 * Register Block using a custom icon.
 * 
 * @param   {String}    name        Block name, namespaced
 * @param   {Object}    settings    Block settings
 * @return  {?WPBlock}              Return the block or 'undefined'
*/
registerBlockType('js4wpgb/static-content', {
    title: __('Custom Block', 'JS4WPGB'),
    icon: iconEl,
    category: 'common',    
    edit( props ) {
        return el('p', {}, 'Hello world!');
    },
    save( props ) {
        return el('p', {}, 'Hello world!');
    }
});

if u want to use sth like a png or jpg simple base64-encode it, e.g. so:

const iconEl = el('img', {src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjM4OXB4IiBoZWlnaHQ9IjM4OXB4IiB2aWV3Qm94PSIwIDAgMzg5IDM4OSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzg5IDM4OTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTM3OSwzMjYuMDM1aC0xOC44NTJjLTUuNTIyLDAtMTAsNC40NzctMTAsMTB2MTQuMTExaC0xNC4xMTNjLTUuNTIyLDAtMTAsNC40NzctMTAsMTBWMzc5YzAsNS41MjMsNC40NzgsMTAsMTAsMTBIMzc5DQoJCQkJYzUuNTIyLDAsMTAtNC40NzcsMTAtMTB2LTQyLjk2NUMzODksMzMwLjUxMiwzODQuNTIyLDMyNi4wMzUsMzc5LDMyNi4wMzV6Ii8+DQoJCQk8cGF0aCBkPSJNMTY2LjkyNywzNTAuMTQ2aC01OC44MTNjLTUuNTIyLDAtMTAsNC40NzctMTAsMTBWMzc5YzAsNS41MjMsNC40NzgsMTAsMTAsMTBoNTguODEzYzUuNTIyLDAsMTAtNC40NzcsMTAtMTB2LTE4Ljg1NA0KCQkJCUMxNzYuOTI3LDM1NC42MjMsMTcyLjQ0OSwzNTAuMTQ2LDE2Ni45MjcsMzUwLjE0NnoiLz4NCgkJCTxwYXRoIGQ9Ik0yODAuODg3LDM1MC4xNDZoLTU4LjgxMmMtNS41MjMsMC0xMCw0LjQ3Ny0xMCwxMFYzNzljMCw1LjUyMyw0LjQ3NywxMCwxMCwxMGg1OC44MTJjNS41MjIsMCwxMC00LjQ3NywxMC0xMHYtMTguODU0DQoJCQkJQzI5MC44ODcsMzU0LjYyMywyODYuNDA5LDM1MC4xNDYsMjgwLjg4NywzNTAuMTQ2eiIvPg0KCQkJPHBhdGggZD0iTTUyLjk2NSwzNTAuMTQ2SDM4Ljg1MnYtMTQuMTExYzAtNS41MjMtNC40NzgtMTAtMTAtMTBIMTBjLTUuNTIyLDAtMTAsNC40NzctMTAsMTBWMzc5YzAsNS41MjMsNC40NzgsMTAsMTAsMTBoNDIuOTY1DQoJCQkJYzUuNTIxLDAsMTAtNC40NzcsMTAtMTB2LTE4Ljg1NEM2Mi45NjUsMzU0LjYyMyw1OC40ODYsMzUwLjE0Niw1Mi45NjUsMzUwLjE0NnoiLz4NCgkJCTxwYXRoIGQ9Ik0xMCwyOTAuODg2aDE4Ljg1MmM1LjUyMiwwLDEwLTQuNDc3LDEwLTEwdi01OC44MTJjMC01LjUyMy00LjQ3OC0xMC0xMC0xMEgxMGMtNS41MjIsMC0xMCw0LjQ3Ny0xMCwxMHY1OC44MTINCgkJCQlDMCwyODYuNDA5LDQuNDc4LDI5MC44ODYsMTAsMjkwLjg4NnoiLz4NCgkJCTxwYXRoIGQ9Ik0xMCwxNzYuOTI2aDE4Ljg1MmM1LjUyMiwwLDEwLTQuNDc3LDEwLTEwdi01OC44MTJjMC01LjUyMy00LjQ3OC0xMC0xMC0xMEgxMGMtNS41MjIsMC0xMCw0LjQ3Ny0xMCwxMHY1OC44MTINCgkJCQlDMCwxNzIuNDQ5LDQuNDc4LDE3Ni45MjYsMTAsMTc2LjkyNnoiLz4NCgkJCTxwYXRoIGQ9Ik01Mi45NjUsMEgxMEM0LjQ3OCwwLDAsNC40NzcsMCwxMHY0Mi45NjdjMCw1LjUyMyw0LjQ3OCwxMCwxMCwxMGgxOC44NTJjNS41MjIsMCwxMC00LjQ3NywxMC0xMFYzOC44NTRoMTQuMTEzDQoJCQkJYzUuNTIxLDAsMTAtNC40NzcsMTAtMTBWMTBDNjIuOTY1LDQuNDc4LDU4LjQ4NiwwLDUyLjk2NSwweiIvPg0KCQkJPHBhdGggZD0iTTI4MC44ODcsMGgtNTguODEyYy01LjUyMiwwLTEwLDQuNDc3LTEwLDEwdjE4Ljg1NGMwLDUuNTIzLDQuNDc4LDEwLDEwLDEwaDU4LjgxMmM1LjUyMiwwLDEwLTQuNDc3LDEwLTEwVjEwDQoJCQkJQzI5MC44ODcsNC40NzgsMjg2LjQwOSwwLDI4MC44ODcsMHoiLz4NCgkJCTxwYXRoIGQ9Ik0xMDguMTEzLDM4Ljg1NGg1OC44MTNjNS41MjIsMCwxMC00LjQ3NywxMC0xMFYxMGMwLTUuNTIzLTQuNDc4LTEwLTEwLTEwaC01OC44MTNjLTUuNTIyLDAtMTAsNC40NzctMTAsMTB2MTguODU0DQoJCQkJQzk4LjExMywzNC4zNzcsMTAyLjU5MSwzOC44NTQsMTA4LjExMywzOC44NTR6Ii8+DQoJCQk8cGF0aCBkPSJNMzc5LDBoLTQyLjk2NWMtNS41MjIsMC0xMCw0LjQ3Ny0xMCwxMHYxOC44NTRjMCw1LjUyMyw0LjQ3OCwxMCwxMCwxMGgxNC4xMTN2MTQuMTEzYzAsNS41MjMsNC40NzgsMTAsMTAsMTBIMzc5DQoJCQkJYzUuNTIyLDAsMTAtNC40NzcsMTAtMTBWMTBDMzg5LDQuNDc4LDM4NC41MjIsMCwzNzksMHoiLz4NCgkJCTxwYXRoIGQ9Ik0zNzksMjEyLjA3NGgtMTguODUyYy01LjUyMiwwLTEwLDQuNDc3LTEwLDEwdjU4LjgxMmMwLDUuNTIyLDQuNDc4LDEwLDEwLDEwSDM3OWM1LjUyMiwwLDEwLTQuNDc4LDEwLTEwdi01OC44MTINCgkJCQlDMzg5LDIxNi41NTEsMzg0LjUyMiwyMTIuMDc0LDM3OSwyMTIuMDc0eiIvPg0KCQkJPHBhdGggZD0iTTM3OSw5OC4xMTRoLTE4Ljg1MmMtNS41MjIsMC0xMCw0LjQ3Ny0xMCwxMHY1OC44MTJjMCw1LjUyMyw0LjQ3OCwxMCwxMCwxMEgzNzljNS41MjIsMCwxMC00LjQ3NywxMC0xMHYtNTguODEyDQoJCQkJQzM4OSwxMDIuNTkxLDM4NC41MjIsOTguMTE0LDM3OSw5OC4xMTR6Ii8+DQoJCTwvZz4NCgk8L2c+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8L3N2Zz4NCg=='});