►
From YouTube: PnP Webcast - Defining an icon for client-side web part
Description
PnP Webcast around the different options for defining an icon for your SharePoint Framework client-side web part, which would be visible in the web part picker.
A
Welcome
everybody:
this
is
chef
on
financial
practices
webcast
on
system.
We
cannot
talk
about
how
to
define
an
icon
for
your
client-side
web
parts,
which
are
being
then
used
in
SharePoint
Online
or
within
on-premises.
My
name
is
Erin
and
I'm,
a
Senior
Program
Manager
in
Microsoft
and
from
SharePoint
engineering
and
Witney.
Today
doing
the
live.
Demo
is
Waldeck
mastercard.
So
while
they
could
really
do
the
quick
intros
as
well
sure.
B
A
So-
and
this
is
one
of
the
topics
which
is
kind
of
a
simple
topic
in
the
end-
but
quite
often
when
you're
creating
a
wet,
but
it
actually
has
a
pretty
big
meaning,
because,
probably
you
don't
want
to
have
us,
let's
say
a
simplistic
icon
showing
just
a
page.
You
want
to
actually
design
what
kind
of
icon
is
being
visible
whenever
somebody's
picking
up
your
web
part,
because
that
tribes
that
the
usage
of
the
web
part
as
well.
So
how
do
we
actually
do
this
there's
a
few
different
options?
How
to
make
this
happen?
A
First
of
all,
we
configure
the
used
icon
within
the
manifest
file
of
your
web
part
and
there's
a
few
different
options
to
make
this
happen,
which
we'll
go
through
in
a
demo
and
following
slide
as
well,
but
then
based
on
your
definition
in
the
manifest
file
and
then
that
web
part
is
being
visible
in
the
web.
Part
beaker
technically
in
the
introduction
was
said
that
well,
you
can
use
the
web
part
and
the
the
icons
in
on
premises
and
in
sharepoint
online
right
now,
within
the
sharepoint
2016
feature
back
to
the
web.
A
Part
experience
is
still
on
a
classic
page
and
you
there's
no
supported
way
of
changing
that
icon
right
now,
we're
looking
in
the
data
on
potentially
in
the
future,
but
this
icon,
setting
within
the
manifest
file,
is
really
around
the
modern
web
part
picker,
and
a
target
for
sharepoint
online
right
now
and
in
the
future
for
on-premises.
Now,
there's
like
mention,
there's
three
different
ways
of
making
this
happen.
So
three
different
options
of
defining
that
icon.
A
The
second
option
is
really
around
referencing,
an
external
image
using
an
absolute
URL
technically
theoretically,
in
the
supercell
vertical
thing,
it
doesn't
actually
have
to
be
an
absolute
URL,
but
in
practice
it
is
an
absolute
URL
which
we
will
be
referencing
to
make
things
work
for
you
we're
having
a
long
debate
with
while
they
clean
this
one.
Just
before
the
start,
at
the
webcast
recording
and
to
theoretically
rather
theoretically,
rip
come
on
not
absolute,
come
on.
A
But
it
it
would
actually
get
said,
it'd
make
the
whole
thing
quite
complicated.
So
absolutely
your
honor
would
be
the
way
to
do
that,
and
that
would
mean
that
we
would
need
to
figure
out
a
location
where
they
meet
is
being
host
and
that
it,
with
the
URL
s
being
accessible
by
the
persons
who
are
using
the
web
part
and
and
whenever
the
web
part
is
getting.
Then
added
on
a
page
will
request
the
image
from
that
location.
A
And
then
the
third
option
is
to
use
a
base64
encoded
image,
and
this
is
essentially
what
it
means
is
that
you
do
a
base64
encoding
of
the
image,
and
you
put
that
one
into
the
manifest.
So
essentially
every
single
time
and
you,
the
webpart
picker,
is
getting
used
that
encoded
as
string,
is
getting
transformed
to
be
an
image
and
it's
an
it's
getting
rendered
within
the
page.
The
maybe
the
one
downside
of
this
one
and
one
is
gonna-
show
this
one
in
practice
as
well.
A
Is
that
when
you're
doing
the
base64
encoding
for
the
image,
that's
quite
big
string
so
technically
and
that
will
eat
up
some
of
the
band
wife
or
the
bits
which
are
congrat
reveling
through
the
the
wire
now
anything
else?
What
you
want
to
what
we
want
to
talk
about
here,
or
should
we
jump
directly
on
the
demo
I.
B
Think
are
good
to
understand
as
well
right.
So
if
you
look
at
the
option,
one
where
we
reference
an
icon
from
from
from
office,
you
iff
I'm
fabric,
that's
convenient
way
because
you
only
refer
to
a
string
and
the
icon
is
there
and
the
icon
that
you
would
use
is
going
to
size
as
well.
Right.
So
imagine
that
somebody
would
change
theme
or
they
will
zoom
in
browser
or
they
use
higher
dpi,
because
they
could.
They
cannot
see
well
right
so
that
icon
will
by
itself
adapt
to
all
of
that.
B
So
you
don't
have
to
worry
about
that
sure.
Now.
If
you
use
image,
there
are
specific
requirements
that
you
have
to
take
into
account
right
because,
first
of
all
URL.
If
it
will
be
an
absolute
one
sure
that
is
going
to
work.
But
if
you
would
use
a
relative
one
which
in
theory
you
can.
You
have
to
keep
in
mind
that
that
URL
will
be
relative
to
the
page
where
the
web
part
is
placed,
not
the
bundle
correctly
and,
as
you
know,
users
can
place
the
web
parts
whenever
they
wherever
they
want.
B
B
The
official
item
says
that
that
image
has
to
be
40
by
28
pixels.
Well,
it
can
be
bigger
and
if,
if
it
is,
is
going
to
be
proportionally
size
to
fit
dimensions,
yeah
the
thing
the
thing
there
is,
if
somebody
would
zoom
in
browser
or
they
use
higher
dpi
again,
there
is
a
chance
that
if
you
would
use
exact
size,
your
icon
will
not
look
well
in
that
zoom
right
absolutely.
So
you
might
use
a
bigger
image
that
will
then
adapt,
but
then
again
you're
downloading
more
bits,
and
then
the
question
is
well.
B
So
how
big
should
should
it
be?
Well,
you
can
really
tell
upfront,
because
you
you
don't
know
what
the
setup
will
be
of
user.
Who
might
add
the
web
part
to
the
page.
So
it's
hard
to
factor
all
of
that
in
right
and
also
you
should
take
into
account
that
the
image
should
not
include
a
background,
because
somebody
might
change
a
team
and
why
it
might
not
be
white
anymore
sure.
I
said
there
are
quite
a
few
things
that
you
have
to
take
into
account
that
you
don't
need
to
worry
about.
B
B
Said
that
string
is
going
to
be
included
in
manifest,
there's
going
to
be
that
that
is
loaded
by
SP
effects
on
every
page,
so
you
are
pulling
down
that
big
string
every
single
time
you
request
a
page
which
is
not
optimal
right.
So
it's
easier
from
deployment
point
of
view,
but
it
adds
the
well.
It
adds
to
your
payload
absolute
right.
So
that's
also
a
thing
for
for
you
to
take
into
account
so.
A
A
Let's
actually
do
that,
so
let's
do
a
quick
demo
on
all
of
those
three
options
or
walking
or
true.
What
does
this
option
mean
and
where
we
can
actually
get
that
information?
Now,
how
do
we
get
the
office
or
our
fabric
terms
and
all
Stan?
So
let's
do
that?
Let's
flipped
on
wall
Tex
computer
and
come
back
on
closing
of
the
broadcast
all.
B
B
So,
as
we
said,
you
can
define
the
icon
in
the
manifest
in
pre-configured
entries
in
web
part,
so
each
pre-configured
web
part
can
have
different
icon
right
because
if
you
would
add,
if
you
would
create
a
web
part
such
as
query
right,
you
can
set
it
up
to
show
news
or
to
show
images
or
to
show
tasks,
and
each
of
these
would
have
an
icon
that
represents
the
config
of
that
the
web
part.
So,
as
you
can
see
here,
we
have
three
options.
B
B
Well,
you
can
get
them
from
from
Internet,
so
here
in
browser,
you
can
go
to
developer
Microsoft
comm,
/en
/
us
as
fabric
that
URL
and
then
on
that
page
you
go
to
styles
icons,
and
here
you
will
see
a
list
of
all
of
the
in
the
icons
from
which
you
can
choose.
So
in
our
case
we
were
looking
for
and
I
can
associate
it
with
weather.
So
let's
look
for
Sun
all
right,
and
here
we
have
three
of
them
with
a
plus
with
a
question
mark
or
just
sunny.
B
So
we
can
grab
this
name
and
then
add
it
verbatim,
as
is
here,
and
that
will
eventually
show
up
here
as
icon
of
a
son
in
tool
box
right.
So
that's
option.
One
option
two
is
to
use
a
URL
which
you
see
here
so,
as
we
said,
we
want
to
use
a
URL
of
an
image
here
in
our
project.
I
have
an
icon
of
an
image
of
a
Sun
which
is
here
SVG,
and
here
I
use
a
relative
URL
right
and,
in
my
case
I
am
in
workbench.
B
So
that's
why
I
want
to
simplify
that
I
want
to
use
a
relative
URL,
but
in
a
real
world,
when
you're
going
to
deploy
the
web
part
to
production,
you
actually
want
to
use
absolute
URL
so
that
it
will
work
on
every
page.
I
saw
that
you
don't
need
to
worry
about
where
the
web
part
is
place
where
it's
deployed
to
where
AR
AR
AR
AR
AR.
The
image
is
stored
right,
so
you
will
avoid
all
of
these
issues
by
including
absolute
URL.
B
Important
part
here
is
the
size
right.
The
image
has
to
be
40
by
28,
as
we
said,
but
you
also
has
to
have
to
take
into
account
like
the
case
that
I
have
here.
I
am
zoomed
in
in
browser
that
image
has
criminal,
it
shows
is
bigger
and
I
don't
lose.
The
quality
because
of
two
reasons,
first
of
all,
my
image
is
bigger
than
that.
If
you
choose
a
bigger
image,
it
will
be
scaled
down
to
fit
dimensions.
B
Second
of
all,
and
that's
also
important
part,
I
used
an
SVG
SVG
image,
which
is
a
vector
right,
so
that
scales
I
can
scale
that
as
big
as
I
want,
and
it
will
always
look
sharp
the
way
it's
supposed
to
be.
If
you
will
use
use
a
bitmap
like
PNG,
JPEG
or
a
gif,
you
would
lose
quality
you.
You
would
actually
the
more
you
zoom.
In
the
words
the
image
would
actually
look
alright.
B
So
that's
also
an
interesting
thing
to
take
into
account
and
whenever
you
can,
whenever
that
is
an
option,
you
should
always
choose
to
use
a
vector,
/
/,
a
bitmap,
because
you
can
scale
that
more
easily
without
without
losing
quality,
and
also
another
thing
is
take
into
account.
The
background,
like
all
of
that,
can
be
themed
right.
So
a
wide
here
might
not
always
be
white,
so
also
take
into
account
that
the
image
used
should
not
have
a
background,
so
it
will
always
match
the
branding
and
not.
B
B
The
way
you
can
do
that
is,
there
are
a
number
of
sites
on
the
Internet
which
you
can
use
to
do
that.
The
one
that
I
use
is
the
base64
image
de
and
it
works
really
simple.
So
the
only
thing
you
have
to
do
is
to
grab
image
upload.
It
adhere
and
you
will
get
a
string.
So
let
me
show
you
how
it
works
in
practice.
Let
me
get
the
image,
which
is
the
Sun
dot
SVG
and
drag
and
drop
it
here
to
the
side.
Now
it's
done
encoding.
B
You
can
here
click
on
that
show
code
option
and
then
here
you
will
get
exactly
the
whole
string
that
you
then
need
to
include
in
manifest
instead
of
URL.
So
if
we
open
the
third
config
for
the
web
parts
that
we
have
here,
you
can
see
the
exact
same
string
all
of
it.
So
the
whole
image
is
now
being
shown
as
a
string
or
is,
or
it's
being
included
as
a
string,
and
the
cool
thing
is
that
if
you
go
back
to
toolbox,
what
users
will
see
are
actually
image
so
to
them.
B
So
that
simplifies
it
a
lot
now,
as
you
can
see,
it
adds
quite
a
lot
of
bits
and
bytes
bites
actually
to
your
to
manifest
and
the
manifest
is
being
included
on
every
single
page.
So
if
you
have
many
webparts
with
many
icons
included
in
them,
your
paid
sites
will
grow
a
lot.
So
that's
also
a
thing
for
you
to
take
into
account
not
to
overdo
this
right,
because
you
cannot
catch
this.
B
That
will
be
included
for
every
instance
of
every
web
part
you
have
in
manifest
and
then
the
manifest
is
included
on
every
single
page,
whether
you,
your
web
part,
is
on
it
or
not
right.
So
that's
also
a
thing
for
you
to
keep
in
mind
right
and
and
also
here.
The
great
thing
is
that
you
can
use
base64
encoding
with
bitmaps
with
vectors
right
and
again,
what
you
want
to
use
eventually
is
is
a
vector
right
because
Det
will
scale
so
with
that
vessel.
A
Two
points
so
obviously
this
is
this.
Webcast
is
around
the
web
part
icons,
but
just
a
pin
point.
The
base64
encoding
option
also
works
within
the
list.
You
could
enlist.
Your
comment
sets
if
you're
creating
an
extension,
so
that's
an
option
there
as
well
and
also
there's
these
three
commands,
as
are
the
buttons
within
the
list,
views
and
libraries.
So
you
can
actually
use
similar
kind
of
options.
There.
Maybe
one
thing
to
note
on
the
options.
B
A
B
But
if
yeah,
when
that
option,
I
assume
that
that
it
will
be
available
at
some
point
and
the
more
you
ask
for
it,
the
bigger
deals
that
it
will
arrive
earlier:
okay,
yeah,
so
that
would
also
be
an
option
for
you
to
to
match
the
UI
available
out
of
the
box
and
yet
have
your
web
parts
be
clearly
distinguished
from
what's
available
out
of
the
box.
Absolutely.
A
A
B
Even
though
it
seems
a
trivial
thing
to
set
an
icon,
it's
important
right
because
it
allows
the
users
to
better
understand
what
your
web
part
is
going
to
do
and
if
the
web
part
you've
built
is
exactly
the
one
they
need.
So
if
you
use
right
icon
as
as
we
set
at
the
start,
it's
an
important
marker
that
that
influence
adoption
right
so
always
use
an
icon.