Custom Elementor Widget Icon

I am creating the custom widgets and I was thinking as is there any was that I can replace the elementor given icons with my own svg file?

Elementor Admin Widgets area:

With something like this:

I tried the below code but not getting result:

.elementor-panel .elementor-element .icon i[class*="example-"] {
    width: 24px;
    height: 24px;
    display: block;
    margin: 0 auto;
    text-align: center;
}

.example-2-buttons {
    background-image: url(../../../../../plugins/example/assets/images/history-custom-icon.svg) !important
}

I also tried the below code as well:

.elementor-element .icon .class-name:before {
    content: "";
    background-image: url(../../../../../plugins/example/assets/images/history-custom-icon.svg) !important;
    height: 30px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

And this as well and this also through error:

function custom_admin_icon_css()
{
  echo '<style>
      .example {
          display: inline-block;
          width: 24px;
          height: 24px;
          background-image: url(../../../../../plugins/example/assets/images/history-custom-icon.svg) !important;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
      }
  </style>';
}
add_action('elementor/editor/after_enqueue_scripts', 'custom_admin_icon_css');