{"id":2909,"date":"2022-10-01T20:44:07","date_gmt":"2022-10-01T18:44:07","guid":{"rendered":"https:\/\/ekiwi.de\/?p=2909"},"modified":"2022-10-01T20:44:22","modified_gmt":"2022-10-01T18:44:22","slug":"react-material-design-icon-groesse-festlegen","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/2909\/react-material-design-icon-groesse-festlegen\/","title":{"rendered":"React Material Design Icon Gr\u00f6\u00dfe festlegen"},"content":{"rendered":"<p>Wie kann ich die Gr\u00f6\u00dfe eines <a href=\"https:\/\/mui.com\/material-ui\/material-icons\/\" target=\"_blank\" rel=\"noopener\">Icons in React Material Design<\/a> festlegen?<\/p>\n<p><!--more--><\/p>\n<p>Folgendes Problem, ein Icon aus dem React Material Design UI Projekt soll in einer Webseite verwendet werden. <\/p>\n<pre>import AccountCircleIcon from '@material-ui\/icons\/AccountCircle';<\/pre>\n<p>Das Icon wird standardm\u00e4\u00dfig recht klein eingebunden. Doch wie kann die Gr\u00f6\u00dfe festgelegt werden? Dies geht \u00fcber die &#8222;fontSize&#8220; Eigenschaft. Etwas unintuitiv f\u00fcr ein Bild, aber OK. Die Gr\u00f6\u00dfe kann sowohl relativ:<\/p>\n<pre>&lt;HomeIcon fontSize=&quot;large&quot; \/&gt;<\/pre>\n<p>&#8230;als auch fest in Pixel vorgegeben werden:<\/p>\n<pre>\r\n&lt;AccountCircleIcon style={{fontSize: &quot;200px&quot;}} \/&gt; \r\n<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2022\/10\/react_icon_1.png\" alt=\"\" width=\"277\" height=\"239\" class=\"alignnone size-full wp-image-2910\" \/><\/p>","protected":false},"excerpt":{"rendered":"<p>Wie kann ich die Gr\u00f6\u00dfe eines Icons in React Material Design festlegen?<\/p>\n","protected":false},"author":1,"featured_media":2260,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[15],"tags":[561],"class_list":["post-2909","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-react"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/2909","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=2909"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/2909\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/2260"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=2909"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=2909"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=2909"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}